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

  • Z时代
  • 2024-01-10
  • 分类：问答

我知道JSX可能会引起很大的误导，因为它看起来像字符串，而实际上不是，因此，即使我们不是真正在操纵字符串，它也是问题中的“字符串”一词。

这是一个代码示例（显然是错误的）：

let line = <Line key={line.client_id} line={line}/>;
if(line.created_at) {
    return <div className="date-line"><span>{line.created_at}</span></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"><span>{line.created_at}</span></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"><span>{line.created_at}</span></div>,
    lineComponent: lineComponent,
  });
} else {
  return chat_line;
}

在这两种情况下，您都必须 。如果是数组，则直接在元素上设置键。关于片段，您提供key：element对。

注意： 在这种情况下，提供的示例无效。

以上是 如何连接两个JSX片段或变量或字符串和组件（在Reactjs中）？ 的全部内容， 来源链接： utcz.com/qa/428999.html

回到顶部