React Native: Binding Template 如何将TextChangeable绑定到React组件

你当前代码的问题在于将JSX结构用模板字符串反引号包裹，导致TextChangeable被识别为普通文本字符串，无法渲染为React组件。正确实现方式如下：

静态绑定写法 #

直接将JSX结构赋值给变量，不需要加模板字符串反引号：

render() {
    const TextChangeable = (
    <Text style={styles.descText}>
      所有报告的总大小为
        <Text style={styles.downloadSize}>
            38 MB
        </Text>
    </Text>
    )
    return <View>
      {TextChangeable}
    </View>
  }

动态可修改绑定写法 #

如果需要动态修改文本内容，可配合state实现自动更新：

class ReportPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      downloadSize: '38 MB' // 可变内容存放在state中
    }
  }

  // 调用该方法即可更新展示的大小
  updateDownloadSize = (newSize) => {
    this.setState({
      downloadSize: newSize
    })
  }

  render() {
    const TextChangeable = (
    <Text style={styles.descText}>
      所有报告的总大小为
        <Text style={styles.downloadSize}>
            {this.state.downloadSize}
        </Text>
    </Text>
    )
    return <View>
      {TextChangeable}
    </View>
  }
}

注意事项 #

• 直接赋值的JSX变量本身就是合法的React元素，可直接在渲染方法中插入使用
• 动态更新场景优先使用state绑定变量，修改state即可自动触发视图刷新
• 若确实需要解析字符串形式的JSX结构，可使用第三方渲染库，非必要场景不推荐该方案，原生JSX赋值的方式性能和可维护性更优

内容的提问来源于stack exchange，提问作者Phaoga54