从外部上下文访问 React 组件函数答案

【问题标题】：Access React component functions from outer context从外部上下文访问 React 组件函数
【发布时间】：2016-05-16 13:46:11
【问题描述】：

我有Class1，它只是Class2 的容器。我在Class1 中声明Test 组件。现在我想将Test 作为参数传递给Class2。

是否可以访问 Test 组件的上下文在 Class2 中我发表评论的地方？

export default class Class1 extends React.Component {
    render() {
        let test = (<Test />);

        return (
            <Class2 test={test} />
        );
    }
}

export default class Class2 extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        let { test } = this.props;

        // how to access Test class context?
        test.setValue("WHERE IS MY CONTEXT?");

        return (
            <div>{ test }</div>
        );
    }
}

export default class Test extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: ""
        };
    }

    setValue(val) {
        this.setState({
            value: val
        });
    }

    render() {
        return (
            <div>{ this.state.value }</div>
        );
    }
}

我试图在 Web 上找到一些东西并检查 test 对象，但我什么也没找到...当我尝试直接访问 test.props 时，我收到一个 React 错误，指出 props 是只读的并且可以'无法访问...

【问题讨论】：

如果您需要访问父容器中的子状态，请将状态向上移动到父容器。
将状态向上移动到父级是什么意思？将逻辑从Test 移动到Class1？我不想要这个。我的项目很简单，但是通用的向导组件。它以这种方式工作：我有一个实际上是向导的主体组件的类。我将这个类传递给向导，但我可以在内部定义多个模板。所以我想通知我的测试模板来设置页面并刷新自己。它的编写方式与问题中的示例相同。我知道如何将上下文传递给孩子，但是否有可能以相反的方式从孩子传递给父母？
数据仅从父级 -> 子级流动。但是像任何其他数据一样，您也可以传递回调函数，您可以通过这些回调函数将子数据作为参数传递，这在父级中处理。
如果您想告诉您的孩子发生了一些变化，那么您可以传递新的道具并在componentWillReceiveProps中聆听。
@Nickon 为什么不使用孩子传递Test 而不是道具？

标签： reactjs ecmascript-6 react-jsx jsx

【解决方案1】：

使用道具代替状态：

let { test } = this.props;

<div>{ React.cloneElement(test, {value: "Hello World"}) }</div>

在Test:

<div>{ this.props.value }</div>

PS：Context means something else in React.

【讨论】：

【解决方案2】：

一个完整的例子：

class Class1 extends React.Component {
    render() {
        return (
            <Class2>
                <Test />
            </Class2>
        );
    }
}

class Class2 extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                {React.cloneElement(this.props.children, {text: "WHERE IS MY CONTEXT?"})}
            </div>
        );
    }
}

class Test extends React.Component {
    constructor(props) {
        super(props);
    }

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

JSFiddle

【讨论】：