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

我知道 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。正确的语法是什么？ 我试过括号，括号，加号，都没用。

谢谢

89599 次浏览
小开
最佳答案

使用数组:

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

在这两种情况下，你必须 为反应提供钥匙。对于数组，您可以直接在元素上设置键。对于片段，您提供 key: element 对。

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

小开

如果你可以使用父对象，比如另一个 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;
}
小开

对于反应本机，我更喜欢这种技术:

  1. 优点: 与数组技术相比，你不必人工创建键
  2. Con: 需要一个包含元素的开销(例如，View，下面)
jsx = <Text>first</Text>;
jsx = <View>{jsx}<Text>second</Text></View>;
小开

你可以使用空标签，我的意思是，<>和 </>，当你只是不想要任何额外的 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上工作; 请参阅 碎片。

预览:

enter image description here

小开

可以使用 数组并将 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>
);
}

提交答案