为什么我不能从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);
React通过refattribute提供了一个您要尝试执行的操作的接口。给组件分配一个ref,其current属性将是您的自定义组件:
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> ); } }