Reactjs 将数据从子路由传递到父路由

我的路线结构如下：

        <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

中，我有我的标题和我的侧菜单（在他上面的所有嵌套路由中都是通用的），

props.children

在这些菜单结构中呈现，但是我的标题有每个路由的特定文本。如何将文本（可能还有一些其他数据）从孩子传递给父亲？

通常通过回调处理向树上传递数据。因为您只需要获取一次值，所以我建议使用其中一个来调用回调

正如您标记的

react-redux

，我将给出react和redux的示例。我认为基本的react示例实际上并不适合您的情况，因为您正在渲染

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.Component{
组件willmount（）{
this.props.setText（“例如”）
}
render（）{
返回(
无论什么
)
}
}
类父类扩展了React.Component{
render（）{
返回(
this.setState（{text}）}/>
{this.state.text}
)
}
}

---

反应/重排 您可以在装入子对象时调度一个操作来设置文本，该操作在存储中设置要在父对象中呈现的值，例如

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)

类ChildView扩展了React.Component{
组件willmount（）{
this.props.setText（“例如”）
}
render（）{
返回(
无论什么
)
}
}
const mapDispatchToProps=（调度）=>{
返回{
setText：（text）=>dispatch（setParentText（text））
}
}
const Child=connect（null，mapDispatchToProps）（ChildView）
const ParentView=（{text}）=>{
返回(
{text}
)
}
常量mapStateToProps=（状态）=>{
返回{
文本：state.parent.text
}
}
const Parent=connect（mapStateToProps）（父视图）

我不会担心显示action creator和reducer/store设置。如果您使用的是redux，那么您应该能够理解这一点

如果

父级

不直接渲染

子级

，无论是通过

道具。引入子级

还是额外的层，这种方法也会起作用。事实上，

Parent

事件根本不需要是

Child

的祖先，只要两者都在同一页上呈现就行了。

太好了！谢谢：）只需将此添加到我的“父项´´this.props.children&&React.cloneElement（this.props.children，{setText:this.setText}）´