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

Question

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

谢谢

原文由 Sephy 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Andreyco 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

1. 亲：与数组技术相比，您不必人为地创建键
2. 缺点：需要包含元素的开销（例如，View， below ）

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

原文由 Pete Alvin 发布，翻译遵循 CC BY-SA 3.0 许可协议