如何从ReactJS的“外部”访问组件方法？

一尘不染

如何从ReactJS的“外部”访问组件方法？

javascript

为什么我不能从ReactJS的“外部”访问组件方法？为什么不可能，有什么办法解决呢？

考虑以下代码：

var Parent = React.createClass({
    render: function() {
        var child = <Child />;
        return (
            <div>
                {child.someMethod()} // expect "bar", got a "not a function" error.
            </div>
        );
    }
});

var Child = React.createClass({
    render: function() {
        return (
            <div>
                foo
            </div>
        );
    },
    someMethod: function() {
        return 'bar';
    }
});

React.renderComponent(<Parent />, document.body);

阅读 331

2020-05-01

共1个答案

一尘不染

React通过refattribute提供了一个您要尝试执行的操作的接口。给组件分配一个ref，其current属性将是您的自定义组件：

class Parent extends React.Class {
    constructor(props) {
        this._child = React.createRef();
    }

    componentDidMount() {
        console.log(this._child.current.someMethod()); // Prints 'bar'
    }

    render() {
        return (
            <div>
                <Child ref={this._child} />
            </div>
        );
    }
}

2020-05-01