Question

我是完全的菜鸟，所以请耐心等待。

我正在创建一个网页，上面有反应组件。我没有使用react创建整个页面，这不是一个选项。

我想要做的是加载一个json文件并使用这些数据来设置页面上组件的属性。一旦页面呈现，这些属性就不会改变。

我已设法加载json并设置组件的属性。我还需要在不属于第一个组件的子组件的其他组件中重用此组件的某些属性。

我想我基本上需要创建一个可供页面上任何组件使用的全局数据集。我来自一个有角度的背景，所以也许这让我偏离了一点

这是我到目前为止所拥有的

    var ReleaseList=React.createClass({

      getInitialState: function(){
        return {
          allReleases:[]
        }
      },
      showResults :function(ReleaseData){

        this.setState({
          allReleases :ReleaseData
        });
      },

      getReleases:function(){
        fetch('http://imac.local:5757/s0dj8a.json').then(function(response) {
            // Convert to JSON
            return response.json();
            }).then(function(j) {
                var ReleaseData=j.releaseDetail[0]
                this.showResults(ReleaseData)
            }.bind(this));
      },
      componentDidMount(){
        this.getReleases();
      },

      render:function(){
    return (

            <h1>{this.state.allReleases.title}</h1>
      )

      }
    });

    var ReleaseDataTitle=React.createClass({
      render:function(){
    return (
      <div>
              <h2>{this.props.title}</h2>
              // This needs to be the same as this.state.allReleases.title in the previous component

      </div>
      )
      }

      });

    ReactDOM.render(<ReleaseList/>, document.getElementById('content'));
    ReactDOM.render(<ReleaseDataTitle title={'I need this to be the same as this.state.allReleases.title in <ReleaseList />'}/>, document.getElementById('banner'));

Answer 1

我不会认为React会渲染您网站的小静态部分，就像我不会使用jQuery一样，如果我很了解JS，那么这样一个简单的任务就是不必要的下载。但是我会考虑Preact，这是针对这种情况制作的3kb React克隆：具有类似API的网站/应用程序的一小部分。

但是在这里我会如何使用React（我想Preact非常相似）。

一旦页面呈现，这些属性就不会改变。

如果数据没有变化，您甚至不需要将数据存储到全局变量，只需在将获取的数据作为props传递时呈现React组件。

fetch('http://imac.local:5757/s0dj8a.json').then(function(response) {
    return response.json()
}).then(function(data) {

     ReactDOM.render(<First data={data} />, document.getElementById('first'))
     ReactDOM.render(<Second data={data} />, document.getElementById('second'))

     // And any other React component you wish to add to DOM

})

现在，每个组件中的数据均为this.props.data。现在，您可以使用此数据执行任何操作：格式化，更改，传递给子项，渲染等。

PS！我甚至React的创建者都建议使用ES6课程，特别是如果你刚刚开始..

Answer 2

关键是你在问题中已经提到过的。您需要全局状态，您可以在其中存储组件所需的数据。您还需要一些方法来进行数据分发。

为了便于我们的应用程序的维护，可预测性和可靠性，我相信React组件应该对数据不可知（这意味着它们应该只代表View层，并且不应该＆nt;自己处理API调用或数据处理。）

由于您的网站没有完全使用react构建，您可以委托vanilla javascript方法进行数据获取，并将其作为道具传递给您的React组件。如果您计划完全迁移到React，则可以使用Redux，MobX等来维护您的全局状态。

React - 从另一个Component设置组件的属性

2 个答案: