如何连接两个 JSX 片段或变量或字符串和组件(在 Reactjs 中)?

IT技术 reactjs concatenation jsx
2021-05-24 02:11:07

我知道 JSX 可能会非常具有误导性,因为它看起来像字符串,但它不是,因此问题中的“字符串”术语,即使我们并没有真正操作字符串。

这是一个代码示例(显然是错误的):

let line = <Line key={line.client_id} line={line}/>;
if(line.created_at) {
    return <div className="date-line"><strong>{line.created_at}</strong></div> + line;
} else {
    return chat_line;
}

我有一条线,我想在某些条件下“连接”它前面的一些 div。什么是正确的语法?我试过括号,括号,加号......他们似乎都没有工作......

谢谢

4个回答

使用数组:

let lineComponent = <Line key={line.client_id} line={line}/>;
if (line.created_at) {
  return [
    <div key="date" className="date-line"><strong>{line.created_at}</strong></div>,
    lineComponent,
  ];
} else {
  return chat_line;
}

或者使用片段:

import createFragment from "react-addons-create-fragment";

let lineComponent = <Line key={line.client_id} line={line}/>;
if (line.created_at) {
  return createFragment({
    date: <div className="date-line"><strong>{line.created_at}</strong></div>,
    lineComponent: lineComponent,
  });
} else {
  return chat_line;
}

在这两种情况下,您都必须为 React 提供密钥在数组的情况下,您可以直接在元素上设置键。关于片段,您提供键:元素对。

注意: render 方法返回时,您只能返回单个元素,或NULL. 在这种情况下,提供的示例无效。

对于 React Native,我更喜欢这种技术:

  1. 优点:与数组技术相比,您不必人为地创建键
  2. con:需要包含元素的开销(例如,View,below
jsx = <Text>first</Text>;
jsx = <View>{jsx}<Text>second</Text></View>;

你可以使用空标签,我的意思是,<></>,只要你不想要任何额外的Container-Element(例如<View>),如下所示:

  render() {
    return (
      <>
        <Text>First</Text>

        <Text>Second</Text>
      </>
    );
  }

例子:

import React from 'react'
import { View, Text } from 'react-native'

import Reinput from 'reinput'

export default class ReinputWithHeader extends Reinput {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <>
        <View style={{backgroundColor: 'blue', flexDirection: 'row', alignSelf: 'stretch', height: 20}}>
          <Text>Blue Header</Text>
        </View>

        {super.render()}
      </>
    );
  }
}

注意:我测试过,它也适用react-native另见片段

预览:

在此处输入图片说明

可以使用数组在那里推送jsx代码。例如:

   function App() {

      function cells() {
        const size = 10;
        const cells = [];
        for (let i=0; i<size; i++) {
          cells.push(
            <tr>
              <td>Hello World</td>
            </tr>
          )
        }
        return cells;
      }

      return (
        <table>
          <tbody>
            {cells()}
          </tbody>
        </table>
      );
    }