如何从ReactJS的“外部”访问组件方法？
如何从ReactJS的“外部”访问组件方法？
提问于 2014-07-19 23:18:39
为什么我不能从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);回答 6
Stack Overflow用户
发布于 2014-09-25 16:27:54
如果要从React外部调用组件上的函数，可以在renderComponent的返回值上调用它们：
var Child = React.createClass({…});
var myChild = React.renderComponent(Child);
myChild.someMethod();在React之外获取React组件实例句柄的唯一方法是存储React.renderComponent的返回值。Source。
Stack Overflow用户
发布于 2014-07-22 02:07:59
或者，如果Child上的方法是真正静态的(不是当前属性、状态的产物)，您可以在statics上定义它，然后像访问静态类方法一样访问它。例如：
var Child = React.createClass({
statics: {
someMethod: function() {
return 'bar';
}
},
// ...
});
console.log(Child.someMethod()) // barStack Overflow用户
发布于 2018-12-05 08:39:06
从React 16.3开始可以使用React.createRef，(使用ref.current访问)
var ref = React.createRef()
var parent = (
<div>
<Child ref={ref} />
<button onClick={e=>console.log(ref.current)}
</div>
);
React.renderComponent(parent, document.body)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24841855
复制相关文章
相似问题