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

Question

为什么我不能从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);

Answer 1

如果要从React外部调用组件上的函数，可以在renderComponent的返回值上调用它们：

var Child = React.createClass({…});

var myChild = React.renderComponent(Child);

myChild.someMethod();

在React之外获取React Component实例的句柄的唯一方法是存储React.renderComponent的返回值。

Answer 2

或者，如果Child上的方法是真正静态的（不是当前道具，状态的乘积），则可以对其进行定义statics，然后像静态类方法一样对其进行访问。例如：

var Child = React.createClass({

  statics: {

    someMethod: function() {

      return 'bar';

    }

  },

  // ...

});

console.log(Child.someMethod()) // bar