将数据从子路由传递到父路由 [英] Passing data from child route to father route

问题描述

我有一个这样的路由结构:

 <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" 组件={PriceTablePage}/></路线><Route path="/poc" component={DistribuitorPageLayout}><IndexRoute path="/poc/inventory" 组件={InventoryPage}/></路线>

在 MasterPageLayout 里面，我有我的标题和我的侧边菜单(他上面的所有嵌套路由都是通用的)，props.children 在这些菜单结构中呈现，但是我的标题对每条路线都有一个特定的文本.我如何将文本(以及其他一些数据)从孩子传递给父亲?

解决方案

将数据备份到树中通常使用回调来处理.因为您只需要在我建议使用 挂载生命周期方法来调用回调.

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

<小时>

基本反应

您可以将回调传递给子组件，该回调在组件状态中设置一个值以在呈现时使用

class Child 扩展 React.Component {componentWillMount() {this.props.setText("例如")}使成为() {返回 (<div>随便</div>)}}class Parent 扩展 React.Component {使成为() {返回 (<div><子集文本={(文本)=>this.setState({text})}/>{this.state.text}

)}}

<小时>

反应/还原

您可以在安装子项时调度一个操作来设置文本，该操作在存储中设置一个值以在父项中呈现，例如

class ChildView 扩展 React.Component {componentWillMount() {this.props.setText("例如")}使成为() {返回 (<div>随便</div>)}}const mapDispatchToProps = (调度) =>{返回 {设置文本:(文本)=>调度(setParentText(文本))}}const Child = connect(null, mapDispatchToProps)(ChildView)const ParentView = ({ text }) =>{返回 (<div><孩子/>{文本}

)}const mapStateToProps = (状态) =>{返回 {文本:state.parent.text}}const Parent = connect(mapStateToProps)(ParentView)

我不会担心显示动作创建器和减速器/存储设置.如果您使用的是 redux，您应该能够弄清楚这一点.

这种方法在Parent不直接渲染Child的情况下也有效，无论是通过props.children还是引入了额外的层.事实上，Parent 根本不需要事件是 Child 的祖先才能使这种方法起作用，只要两者都呈现在同一页面上即可.>

I have a route structure like this:

        <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>

Inside the MasterPageLayout I have my header and my sidemenu (common to all the nested routes above him), the props.children is rendered inside those menus structures, but my header has a specific text for each route. How can I pass the text (and maybe some other data) from the child to the father?

解决方案

Passing data back up the tree is usually handled with callbacks. As you only need to get the value once I'd recommend using one of the mounting lifecycle methods to call the callback.

As you've tagged react-redux, I'll give examples for both a React and Redux. I don't believe the basic react example is actually suitable for your situation, as you are rendering props.children which makes passing the callback down more difficult, but I'll leave it in the answer in case it's useful to someone else. The redux example should be applicable to your problem.

---

Basic React

You can pass a callback to the child that sets a value in the components state to use when rendering

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

You could dispatch an action to set the text when the child is mounted that sets a value in the store to render in the parent, e.g.

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)

I wont worry showing the action creator and the reducer/store setup. If you're using redux you should be able to figure that bit out.

This approach will also work if Parent doesn't directly render Child, whether it is through props.children or extra layers are introduced. In fact, Parent doesn't event need to be an ancestor of Child at all for this approach to work, as long as both are rendered on the same page.

这篇关于将数据从子路由传递到父路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！