将数据从 child 路由传递到父路由

Question

我有这样的路由结构：

        <Route path="/master" component={MasterPageLayout}>
            <IndexRoute path="/master/products" component={ProductsPage}/>
            <Route path="/master/customer/:id" component={CustomerDetailsPage}/>
            <Route path="/master/product/:id" component={ProductDetailsPage}/>
            <Route path="/master/price-table" component={PriceTablePage} />
        </Route>
        <Route path="/poc" component={DistribuitorPageLayout}>
            <IndexRoute path="/poc/inventory" component={InventoryPage}/>
        </Route>

在 MasterPageLayout 里面，我有我的 header 和我的侧边菜单（对于他上面的所有嵌套路由都是通用的），props.children 在这些菜单结构中呈现，但是我的 header 每条路线都有特定的文字。我怎样才能将 child 中的文本（可能还有一些其他数据）传递给父亲？

Answer 1

将数据向上传递回树通常使用回调处理。因为您只需要获取一次值，我建议您使用 mounting lifecycle methods 之一来调用回调。

由于您已标记 react-redux，我将给出 React 和 Redux 的示例。我不相信基本的反应示例实际上适合你的情况，因为你正在渲染 props.children 这使得传递回调更加困难，但我会把它留在答案中以防它对其他人有用. redux 示例应该适用于您的问题。

基础反应

您可以将回调传递给在渲染时使用的组件状态中设置值的子组件

class Child extends React.Component {
    componentWillMount() {
        this.props.setText("for example")
    }

    render() {
        return (
            <div>whatever</div>
        )
    }
}

class Parent extends React.Component {
    render() {
        return (
            <div>
                <Child setText={(text) => this.setState({text})} />
                {this.state.text}
            </div>
        )
    }
}

React/Redux

您可以分派一个操作来在安装子项时设置文本，该文本在商店中设置一个值以在父项中呈现，例如

class ChildView extends React.Component {
    componentWillMount() {
        this.props.setText("for example")
    }

    render() {
        return (
            <div>whatever</div>
        )
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        setText: (text) => dispatch(setParentText(text))
    }
}

const Child = connect(null, mapDispatchToProps)(ChildView)

const ParentView = ({ text }) => {
    return (
        <div>
            <Child />
            {text}
        </div>
    )
}

const mapStateToProps = (state) => {
    return {
        text: state.parent.text
    }
}

const Parent = connect(mapStateToProps)(ParentView)

我不会担心展示动作创建者和 reducer/store 设置。如果您使用的是 redux，您应该能够弄清楚这一点。

如果 Parent 不直接渲染 Child，无论是通过 props.children 还是引入额外的层，此方法也有效。事实上，Parent 根本不需要成为 Child 的祖先，只要两者呈现在同一页面上，这种方法就可以工作。

将数据从 child 路由传递到父路由

Passing data from child route to father route

reactjs

react-router

react-redux

基础反应

React/Redux