Question

我有创作者，我的意思是step1 -next-＆gt; step2 -next-＆gt; ... 在我的父组件中，我有按钮预览，接下来，步骤内容将呈现为子项。

class MyCreator extends React.Component {
   render() {
      return (
         <div>
            {this.renderStep(this.props.step.id)}
         </div>
         <div>
            <button>back</button>
            <button>next</button>
         </div>
      );
   }
}

在一个步骤中，我有一个只有两个方法的组件：getData，setData。这是第三方组件（因此我无法更改实现）。当我单击按钮next时，我想从当前步骤获取getData。我的意思是在每个步骤子组件上调用一些泛型方法，如leaveStep。然后leaveStep返回一些数据，我将传递给redux动作。

Answer 1

如果我做对了，理想的解决方案是将状态提升到Parent组件，看看this part of the React documentation。但是，由于您无法控制组件，因此可能会产生一些问题以同步状态。这样的事情可以解决问题：

class Parent extends Component {
    state = {
        childData: null
    }

    getChildData = (data) => {
        this.setState({
            childData: data,
        }, () => { console.log(this.state); });
    }
    render() {
        return <Child setData={this.getChildData} />
    }
}

class Child extends Component {
    state = {
        data: 'this is child data'
    }

    render() {
        return <button onClick={() => this.props.setData(this.state.data)}>Next</button>;
    }
}

但请记住，这会创建一个重复的状态，打破single source of truth，对于大型应用程序来说可能非常混乱。

React + redux从子组件获取数据

1 个答案: