如何连接两个 JSX 片段或变量或字符串和组件（在 Reactjs 中）？答案

【问题标题】：How to concatenate two JSX fragment or variables or string and component (in Reactjs)?如何连接两个 JSX 片段或变量或字符串和组件（在 Reactjs 中）？
【发布时间】：2016-08-23 01:42:01
【问题描述】：

我知道 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。什么是正确的语法？我试过括号、方括号和加号……它们似乎都不起作用……

谢谢

【问题讨论】：

标签： reactjs concatenation jsx

【解决方案1】：

使用数组：

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。在这种情况下提供的示例无效。

【讨论】：

是的，阵列技术确实奏效了。起初这有点奇怪，但至少，您可以将其逐行格式化，使其看起来像 HTML。相当整洁。谢谢！
在实际使用中，我更喜欢片段。只是个人喜好:)
要知道的是，使用 Array 方法会强制你拥有唯一的 key 属性。

【解决方案2】：

对于 React Native，我更喜欢这种技术：

专业人士：与数组技术相比，您不必人工创建键
con：需要包含元素的开销（例如，View，below）

jsx = <Text>first</Text>;
jsx = <View>{jsx}<Text>second</Text></View>;

【讨论】：

【解决方案3】：

您可以使用空标签，我的意思是 <> 和 </>，只要您不想要任何额外的 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；另见Fragments。

预览：

【讨论】：

哈哈哇哇！！这太狡猾了，我觉得我会遇到麻烦。最终我将使用React.Fragment，但这很棒。
我将它用作 New Transaction
F4
>，它对我帮助很大。

【解决方案4】：

可以使用 Array 并在那里推送 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>
      );
    }

【讨论】：

【解决方案5】：

如果您可以使用另一个 div 等父对象，您也可以这样做：

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

【讨论】：