Question

想象一下，组件A创建了组件B需要显示的项目列表。将数据从组件A传递到组件B的正确方法是什么？

例如，假设组件A的构造函数创建了一个项列表，并具有一个返回该列表的函数_getListItems()。我希望父母可以通过道具将该列表传递给其他组件。

我的天真（非工作）实现让他们的父实体尝试渲染这样的组件：

render () {
    return (
      <div>
        <h1>Data Test</h1>        
        <ComponentA ref='compa'/>
        <ComponentB items={this.refs.compa._getListItems()}/>
      </div>
    );
}

....虽然上面的代码不起作用，但我希望它能说明我正在尝试做什么。

PS。 nOOb反应和javascript，所以请原谅我，如果我的问题的答案显而易见......

Answer 1

将您的组件分为两个不同的类别。

负责展示物品的演示组件。该组件不应具有状态（UI状态除外）。
知道数据的容器组件。

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.skmxo7vt4

因此，在您的情况下，数据应由ComponentA和ComponentB的父级创建，并通过道具将数据传递给ComponentA和ComponentB。

示例：

render(){
    let items = this._getListItems();
    return (
        <div>
            <ComponentA items={items} />
            <ComponentB items={items} />
        </div>
    );
}

修改

在评论中重写OP的方法：

class MyContainer extends React.Component { 
    constructor(props) { 
        super(props);
        this.state = { stuff: [1,2,3] }; 
    } 

    render() { 
        return ( 
            <div>
                <ComponentA items={this.state.stuff} /> 
                <ComponentB items={this.state.stuff} /> 
            </div> 
        ); 
    } 
}

Answer 2

按照上面接受的答案，我刚刚有一个（相关的）EUREKA时刻，所以我要扩大答案;当父级使用自己的状态将props传递给子级时，只要父级状态发生更改，就会调用其render（）函数，从而更新具有更新状态的子级。所以你可以做这样的事情：

class MyContainer extends React.Component { 
    constructor(props) { 
        super(props);

        let sltd = this.props.selected
        this.state = { 
          stuff: [1,2,3], 
          selected: sltd
        }; 
    } 

    _handleAStuff(value) {
        this.setState(selected: value)
        //do other stuff with selected...
    }

    _handleBStuff(value) {
        this.setState(selected: value)
        //do other stuff with selected...
    }

    render() { 
        return ( 
            <div>
                <ComponentA items={this.state.stuff} selected={this.state.selected} parentFunc={this._handleAStuff.bind(this)} /> 
                <ComponentB items={this.state.stuff} selected={this.state.selected} parentFunc={this._handleBStuff.bind(this)} /> 
            </div> 
        ); 
    } 
}

MyContainer.defaultProps = {
  selected: 0
}

class ComponentA extends React.Component {

  constructor(props) {
    super(props)
  }

  _handleSelect(value) {
    this.props.parentFunc(value.label)
  }

render() {

    const itm = this.props.items.map(function(values) {
      return { value: values, label: values}
    })

    return (
      <div>
        <Select
          options={itm}
          value={this.props.selected}
          onChange={this._handleSelect.bind(this)}
        />
      </div>
    );
  }
}

// ComponentB...

上面的回调模式意味着ComponentA和ComponentB不需要维护状态，它们只是“渲染东西”，这也很酷。我开始看到REACT的力量......

在React中传递组件之间的依赖关系的正确方法是什么？

2 个答案:

修改