Можно ли динамически работать с JSX в React Native?

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