如何在React组件中访问JSON？

Question

我有一个来自脚本标签的JSON对象，如下所示：

  <script type="text/json" id="json-data">
    {'someData': 'Lorem ipsum...'}
  </script>

我希望能够提取此信息并在我的render方法中的React组件中使用它。

问题似乎是我需要将它设置为componentWillMount中的变量：

export default MyReactComponent extends Component {

  componentWillMount() {
    const test = document.getElementById('json-data').innerHTML;
  }

  render() {
    return (
      <div>
        // This is where I would like to use this data.
      </div>
    );
  }

}

这是处理传递此数据的最佳方法吗？如果是这样，我如何在组件的render方法中访问这些数据？

谢谢！

Answer 1

将其存储在组件的状态中。 render方法应该只依赖this.state和this.props

冒着过度简化的风险：

• this.props从父组件传递
• this.state是组件内部的状态

示例

export default MyReactComponent extends Component {

  componentDidMount() {
    this.setState({
        test: JSON.parse(document.getElementById('json-data').innerHTML)
    });
  }

  render() {
    return <div>{this.state.test}</div>;
  },

  getInitialState: function() {
    return {test: {}}
  } 
}