React.js – 访问组件方法
为什么我不能从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通过ref属性为你正在做的事提供了一个接口。 指定一个组件的refcallback，它将被渲染时引用组件的引用：
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年9月19日： 更改了示例以使用refcallback，而不是string引用从refstring属性文档的指导。
注意 ：这只有在子组件被声明为一个类时才有效，如下所示： https : //facebook.github.io/react/docs/refs-and-the-dom.html#adding-a- REF到一类组分
或者，如果Child上的方法是真正静态的（不是当前道具和状态的产物），则可以在静态方法上定义它，然后像静态类方法那样访问它。 例如：
var Child = React.createClass({ statics: { someMethod: function() { return 'bar'; } }, // ... }); console.log(Child.someMethod()) // bar
如果你想从React外部调用组件的函数，你可以在renderComponent的返回值上调用它们：
var Child = React.createClass({…}); var myChild = React.renderComponent(Child); myChild.someMethod();
获取React之外的React组件实例的唯一方法是存储React.renderComponent的返回值。 来源 。
自React 0.12以来，API 稍有改变 。 初始化myChild的有效代码如下：
var Child = React.createClass({…}); var myChild = React.render(React.createElement(Child, {}), mountNode); myChild.someMethod();
你也可以这样做，不知道这是一个好的计划：D
class Parent extends Component { handleClick() { if (this._getAlert !== null) { this._getAlert() } } render() { return ( <div> <Child> {(getAlert, childScope) => ( <span> {!this._getAlert ? this._getAlert = getAlert.bind(childScope) : null}</span> )} </Child> <button onClick={() => this.handleClick()}> Click me</button> </div> ); } } class Child extends Component { constructor() { super(); this.state = { count: 0 } } getAlert() { alert(`Child function called state: ${this.state.count}`); this.setState({ count: this.state.count + 1 }); } render() { return this.props.children(this.getAlert, this) } }
正如在一些评论中提到的， ReactDOM.render不再返回组件实例。 在渲染组件的根目录以获取实例时，您可以传递refcallback，如下所示：
// React code (jsx) function MyWidget(el, refCb) { ReactDOM.render(<MyComponent ref={refCb} />, el); } export default MyWidget;
和：
// vanilla javascript code var global_widget_instance; MyApp.MyWidget(document.getElementById('my_container'), function(widget) { global_widget_instance = widget; }); global_widget_instance.myCoolMethod();
