Question

所以我几天前开始做出反应并且遇到了第一个问题。我使用 react-router 构建网站结构，示例如下所示：

const app = document.getElementById('app');
ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={MainPage}></IndexRoute>
            <Route path="/creator" component={MainCreator}>
                <Route path="select" component={Step1}></Route>
                <Route path="customize" component={Step2}></Route>
            </Route>
        </Route>
    </Router>,
app);

在布局中，我正在渲染一些网站部分（工作正常，所以我将跳过此代码）：

render() {
    return (
        <div>
            <Header />
            <Menu />
            {this.props.children}
        </div>
    );
}

我使用Link浏览页面，例如：

<Link to="creator/select">Creator - step1</Link>

继续前进，我的 MainCreator 是其中的子页面的另一个组件，现在它很简单：

render() {
    return (
        <div>
        {this.props.children}
        </div>
    );
}

我的问题是关注应用程序的流程以及如何解决这个问题。在Creator的Step1中，用户必须选择将要创建的文档类型（如“pdf”或“html”）。现在有样本标签，但它可以是任何东西。因此，在用户点击它之后，我必须记住选定的值并加载（可以在点击提交按钮之后）Step2组件，并且视图正确。

我尝试使用this.state，但是我应该使用this.props，因为state /应该是特定组件中的私有。但是我不知道如何在Creator主页和两个子/步之间构建这种关系（最后在Creator中会有5个步骤）。

对我来说，它应该像在Creator组件中保存这个变量一样，但是能够从任何Creator孩子中修改和读取它的当前状态。

Answer 1

在maincreator组件中使用保存用户选择记录的状态。将此状态作为prop传递给step2组件。还将一个函数作为prop传递给step1组件。该功能只根据用户的选择设置状态值。

在maincreator组件中定义状态和方法，并传递给子组件，如下所示：

    constructor(props){
      this.state={ userResponse: null}
    }
    changeResponse = (res) => {
       this.setState({userResponse: res})
    }
    .....
    render() {
       const children = React.Children.map(this.props.children,
              (child) => React.cloneElement(child,{userResponse:this.state.userResponse, changeResponse: this.changeResponse})
          );
       return (
        <div>
        {children}
        </div>
    );
}

反应第一次 - 结构，在页面和变量之间移动

1 个答案: