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

javascript dom reactjs

2022-08-30 01:13:20

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

答案 1

React 为你通过 ref 属性尝试执行的操作提供了一个接口。为组件 a 赋值，其属性将是您的自定义组件：refcurrent

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

注意：仅当子组件声明为类时，这才有效，如此处找到的文档所示：https://facebook.github.io/react/docs/refs-and-the-dom.html#adding-a-ref-to-a-class-component

2019-04-01 更新：更改了示例，以根据最新的 React 文档使用类和 createRef。

2016 年 9 月 19 日更新：更改了示例，以根据 ref String 属性文档中的指南使用 ref 回调。

答案 2

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

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

获取 React 组件实例外部的句柄的唯一方法是存储 React.renderComponent 的返回值。来源。