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

发布于04月28日

我知道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.正确的语法是什么？

谢谢

推荐答案

使用数组:

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;
}

在这两种情况下，你都必须达到provide keys for React.对于数组，可以直接在元素上设置键.关于片段，您提供键:元素对.

注: