反应 - 从另一个组件设置组件的属性

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

我想要的是我想要做的是加载一个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'));

来源

2016-11-19 John76

我不会考虑反应使你的网站的小静部分就像我不会使用jQuery，如果我知道JS很好 - 这是一个简单的任务不必下载。然而，我会考虑Preact，这是一种3kb的React克隆，它是针对这种情况制作的：具有类似API的网站/应用程序的小部分。

但这里是我将如何与React（我想像Preact是非常相似的）做到这一点。一旦页面呈现

这些属性将不会发生变化。

如果数据没有变化，你甚至都不需要存储的数据为全局变量，只呈现反应的组分，同时通过所获取的数据作为props。

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课程，尤其是如果你刚开始的时候。

来源

2016-11-19 13:33:41 Solo

谢谢，这是完美的。我也要看看Preact :-) – John76

关键是你已经在你的问题中提到的东西。您需要一个全局状态，您可以在其中存储组件所需的数据。您还需要一些方法来完成数据分配。

为了维修方便，可预见性和我们的应用程序的可靠起见，我相信反应的组分应不可知有关数据（这意味着他们只能代表视图层，而不应该处理的API调用或数据处理通过他们自己）。

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

来源

2016-11-19 15:17:13

反应 - 从另一个组件设置组件的属性

回答

相关问题