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

IT技术 javascript reactjs dom
2021-01-16 12:54:24

为什么我不能在 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个回答

React 通过ref属性为您尝试执行的操作提供了一个接口。分配一个组件 a 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>
        );
    }
}

注意：这仅在子组件被声明为类时才有效，根据此处找到的文档：https : //facebook.github.io/react/docs/refs-and-the-dom.html#adding-a-引用到类组件

2019 年 4 月 1 日更新： 更改示例以使用类和createRef最新的 React 文档。

2016 年 9 月 19 日更新： 更改示例以根据ref字符串属性文档中的指导使用 ref 回调。

React 鼓励数据驱动的组件。让一个孩子调用一个回调来更改其祖先中的数据，当该数据更改时，另一个孩子将获得新的数据props并适当地重新渲染。
2021-03-16 12:54:24
@RossAllen，哈哈，是的，在这种情况下，您也必须删除分号。
2021-03-16 12:54:24
@HussienK 如果函数没有返回值，我更喜欢使用块，这样下一个阅读代码的开发人员的意图就很明显。将其更改为{(child) => this._child = child}将创建一个始终返回 的函数true，但 React 的ref属性不使用该值。
2021-04-02 12:54:24
那么，在两个子组件之间进行通信的唯一方法是同时拥有 refs 并通过公共父组件上的代理方法？
2021-04-10 12:54:24

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

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

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

实际上它适用于react16。ReactDOM 渲染方法返回对组件的引用（或为无状态组件返回 null）。
2021-03-15 12:54:24

或者，如果 Child 上的方法确实是静态的（不是当前 props、state 的产物），您可以定义它statics，然后像访问静态类方法一样访问它。例如：

var Child = React.createClass({
  statics: {
    someMethod: function() {
      return 'bar';
    }
  },
  // ...
});

console.log(Child.someMethod()) // bar
来源在这里。
2021-04-08 12:54:24

从 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)

从 React 0.12 开始，API略有变化。初始化 myChild 的有效代码如下：

var Child = React.createClass({…});
var myChild = React.render(React.createElement(Child, {}), mountNode);
myChild.someMethod();
其它你可能感兴趣的问题
上一篇如何在 Ajax 加载的内容上绑定事件？ 下一篇如何计算与另一个点相距一定距离的点的纬度？