将数据传递回树通常是通过回调处理的。因为您只需要获取一次值，我建议您使用一种安装生命周期方法来调用回调。

正如您所标记的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 / 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)

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

如果Parent不直接渲染Child（无论是通过渲染props.children还是引入额外的图层），此方法也将起作用。实际上，只要这两种方法都在同一页面上呈现，那么使用这种方法Parent就完全不需要成为祖先Child。