reactjs – React Redux – 通过props或connect将数据传递给组件

发布时间：2020-12-15 09:34:38 所属栏目：百科来源：网络整理

导读：我正在研究React Redux应用程序,我对某些最佳实践有一个非常基本的问题. 我有MainComponent(一种容器)我在componentDidMount上获取数据： class MainComponent extends React.Component { componentDidMount(){ this.fetchData() } fetchData() { this.props

我正在研究React Redux应用程序,我对某些最佳实践有一个非常基本的问题.

我有MainComponent(一种容器)我在componentDidMount上获取数据：

class MainComponent extends React.Component {
  componentDidMount(){
    this.fetchData()
  }
  fetchData() {
    this.props.fetchDataAction()
  }
  render() {
    return (
      <div>
        <ChildComponent1 />
        <ChildComponent2 />
      </div>
    )
  }
}
export default connect(mapStateToProps,{fetchDataAction})(MainComponent)

如何将获取的数据传递给ChildComponents？什么是最佳做法？两种可能的解决方案是(恕我直言 – 可能更多？)

第一解决方案

class MainComponent extends React.Component {
...
render() {
  return (
    <div>
      <ChildComponent1 dataOne={this.props.data.one} />
      <ChildComponent2 dataTwo={this.props.data.two} />
    </div>
  )
}
...

第二个解决方案 – 将ChildComponents连接到存储,该存储由MainComponent中的fetchDataAction()更新：

class ChildComponent1 extends React.Component {
  render() {
    return (
      <div>
        {this.props.one}
      </div>
    )
  }
}
function mapStateToProps(state){
  return (
    one: state.one
  )
}
export default connect(mapStateToProps,null)(ChildComponent1)

现在我使用第一个解决方案,当ChildComponents不会触发更新存储和第二个解决方案的操作时.但我不确定这是否是正确的方法.

解决方法

如果您有多个子组件,则必须将获取的数据的一部分传递给不同的子组件;我建议将父组件保留为单点源.

您可以尝试以下方法： –

class MainComponent extends React.Component {

  constructor(){
     super()
     this.state = {
       data  : {}
     }
  }

  componentDidMount(){
    this.fetchData()
  }
  fetchData() {
    this.props.fetchDataAction()
  }

  componentWillReceiveProps(nextProps){
    //once your data is fetched your nextProps would be updated
     if(nextProps.data != this.props.data && nextProps.data.length>0){
        //sets your state with you data--> render is called again
        this.setState({data:nextProps.data}) 
  }
  render() {
    //return null if not data
    if(this.state.data.length === 0){
         return null
    }
    return (
      // it should have keys as one and two in api response
      <div>
        <ChildComponent1 data={data.one}/>
        <ChildComponent2 data={data.two}/>
      </div>
    )
  }
}

function mapStateToProps(state){
  return (
    data: state
  )
}
export default connect(mapStateToProps,{fetchDataAction})(MainComponent)

我觉得所有的逻辑都停留在一个地方.假设您计划在将来添加以添加更多子组件,您只需要在API上添加一行代码并进行少量更改.但是,如果您在每个组件中读取,则已将该组件再次连接存储,这使其更加复杂.

因此,除了获取数据之外,如果您的子组件中没有任何其他逻辑,我会将此逻辑保留在父组件中.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!