Question

我一直在使用JSX在React Native中渲染布局。是否可以动态创建JSX而不是硬编码？或者使用除JSX以外的其他东西更好？

render() {
    return (
      <TouchableHighlight>
        <View>
          <View style={styles.rowContainer}>
              <Text style={styles.price}>{item.Caption}</Text>
              <Text style={styles.title}>{item.TextBody}</Text>
          </View>
          <View style={styles.separator}/>
        </View>
      </TouchableHighlight>
    );
}

例如，如果我想在其他<Text>{item.IsFinished}</Text>元素之后添加一个额外的<Text>元素（如果数据需要它），我怎么能在渲染函数中做到这一点？

Answer 1

是的，可以执行{(condition here) && <Text>{item.IsFinished}</Text>}

之类的操作

完整代码：

render() {
  return (
    <TouchableHighlight>
      <View>
        <View style={styles.rowContainer}>
          <Text style={styles.price}>{item.Caption}</Text>
          <Text style={styles.title}>{item.TextBody}</Text>
          {item.IsFinished && <Text>{item.IsFinished}</Text>}
        </View>
        <View style={styles.separator}/>
      </View>
    </TouchableHighlight>
  );
}

是否可以在React Native中动态使用JSX？

1 个答案: