reactjs - 是否允许用js添加react-jsx代码块？

Question

我拥有的是一个带有一些条件的简单渲染函数。

class AwesomeTestClass {
  constructor() { /* constructor stuff */ }
  reder() {
    let OUT = (<Text> basic text 1 </Text>);

    if (someCondition) {
      OUT += (<Text> add some condition text </Text>);
    } else {
      OUT += (<Text> add other condition text </Text>);
    }

    OUT += (<Text> end of awesome text </Text>);

    return (
      <View>
        {OUT}
      </View>
    );
  }
}

我尝试完成以下输出:

<View>
<Text> basic text 1 </Text>
<Text> add some condition text </Text>
<Text> end of awesome text </Text>
</View>

我的错误如下:

RawText "[object Object][object Object]" must be wrapped in an explicit <Text> component.

所以我想知道以下内容:

• 有没有办法使用 += js 中的 React-jsx 变量的运算符就像 js 对字符串所做的那样？
• 有没有办法使用 + js 中的 React-jsx 变量的运算符就像 js 对字符串所做的那样？

如果没有，有没有办法:

• 从字符串转换为 JSX
• 从 JSX 转换为 String

我尝试过以下操作:

• 使用 JSX:

  // += visible at the top
  
  let OUT = (<Text>Awe</Text>);
  OUT = OUT + (<Text>some</Text>);
  

  错误输出:

  RawText "[object Object][object Object]" must be wrapped in an explicit <Text> component.

• 使用字符串:

  let OUT = "<Text>Awe</Text>";
  OUT = OUT + "<Text>some</Text>";
  
  let OUT = "<Text>Awe</Text>";
  OUT += "<Text>some</Text>";
  

  错误输出:

  RawText "<Text>Awe</Text><Text>some</Text>" must be wrapped in an explicit <Text> component.

• 使用字符串转换:

  let OUT = String(<Text>Awe</Text>);
  OUT = OUT + String(<Text>some</Text>);
  
  let OUT = String(<Text>Awe</Text>);
  OUT += String(<Text>some</Text>);
  

  错误输出:

  RawText "[object Object][object Object]" must be wrapped in an explicit <Text> component.

• 使用字符串进行字符串转换:

  let OUT = String(<Text>Awe</Text>);
  OUT = OUT + "<Text>some</Text>";
  
  let OUT = String(<Text>Awe</Text>);
  OUT += "<Text>some</Text>";
  

  错误输出:

  RawText "[object Object]<Text>some</Text>" must be wrapped in an explicit <Text> component.

我为什么要尝试？
好吧，我不想将每个语句移动到一个函数中。

Answer 1

您可以将组件插入数组并渲染:

render() {
  let OUT = [(<Text key={1}> basic text 1 </Text>)];

  if (someCondition) {
    OUT.push(<Text key={2}> add some condition text </Text>);
  } else {
    OUT.push(<Text key={3}> add other condition text </Text>);
  }

  OUT.push(<Text key={4}> end of awesome text </Text>);

  return (
    <View>
      {OUT}
    </View>
  );
}

请注意，在本例中我添加了一个硬编码 key 。如果使用循环来渲染这些项目，则需要一个键，以便 React 可以区分动态添加或删除的每个组件。不要使用索引作为键，如 it's an anti-pattern .