javascript – React.js – 访问组件方法

为什么我无法从React.js中的“outside”访问组件方法?为什么不可能,有什么办法解决它吗?

考虑代码:

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

谢谢。

React为您通过ref attribute尝试做的事情提供了一个接口。为组件分配一个ref回调,并且在渲染时将使用对组件的引用来调用它:

var Parent = React.createClass({
    componentDidMount: function() {
        console.log(this._child.someMethod()); // Prints 'bar'
    },
    render: function() {
        return (
            <div>
                <Child ref={(child) => { this._child = child; }} />
            </div>
        );
    }
});

更新2016-09-19:更改了使用ref回调的示例,而不是根据the ref String attribute docs的指导的字符串引用。

http://stackoverflow.com/questions/24841855/react-js-access-to-component-methods

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – React.js – 访问组件方法