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

谢谢

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的密钥 。如果是数组，则直接在元素上设置键。关于片段，您提供key：element对。

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