无法通过 ref 访问子函数？

IT技术 reactjs redux react-redux
2021-05-16 13:32:08

最初一切正常，我有一个类似的组件。这

  class A extends React.Component {
     constructor(props) {
       super(props);
       this.childRef = null
     }

    componentDidMount() {
     this.childRef = this.refs.b
     // now I can call child function like this
      this.childRef.calledByParent()
    }

    render(){
      <B ref = "b"/>
    }
  }

在其他文件中

     class B extends React.Component {

       calledByParent(){
         console.log("i'm called")
        }

       render(){
        <div> hello </div>
       }
  }
 export default B

到这里它工作正常但是当我在做这样的事情时 class B export default connect(mapStateToProps, mapDispatchToProps)(B)

它不工作。我已经从 react-redux 导入了 connect

3个回答

connect()接受option作为第四个参数。在此选项参数中，您可以将标志设置withRef为 true。在此之后，您可以使用getWrappedInstance()like访问 refs 的函数

class A extends React.Component {
     constructor(props) {
       super(props);
       this.childRef = null
     }

    componentDidMount() {
        this.childRef.getWrappedInstance().calledByParent()
    }

    render(){
      <B ref = {ref => this.childRef = ref}/>
    }
  }

class B extends React.Component {

       calledByParent(){
         console.log("i'm called")
        }

       render(){
        <div> hello </div>
       }
  }
   export default  connect(mapStateToProps, mapDispatchToProps, null, {withRef: true})(B)

可能有点晚了，但另一个（更好）的解决方案是只控制组件的特定功能。

class A extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.ctrl_B.calledByParent()
    }

    render(){
        <B provideCtrl={ctrl => this.ctrl_B = ctrl} />
    }
}

class B extends React.Component {

    componentDidMount() {
        this.props.provideCtrl({
            calledByParent: () => this.calledByParent()
        });
    }
    componentWillUnmount() {
        this.props.provideCtrl(null);
    }

    calledByParent(){
        console.log("i'm called")
    }

    render(){
        <div> hello </div>
    }
}
export default  connect(mapStateToProps, mapDispatchToProps)(B)

我有类似的问题，但我不想让我的 API 依赖于 getWrappedInstance()调用。事实上，类层次结构中的某些组件可能使用 connect() 并访问存储，而其他一些组件只是不需要额外 Redux 层的无状态组件。

我刚刚写了一个小的（可能有点hackish）方法。请注意，它还没有经过全面测试，因此您可能需要进行一些调整才能使其在您自己的场景中工作。

TypeScript（应该很容易转换为纯 JavaScript 语法）：

function exposeWrappedMethods(comp: React.ComponentClass<any>, proto?: any): any {
    if (!proto) {
        if (comp.prototype.constructor.name === 'Connect') {
            // Only Redux component created with connect() is supported
            proto = comp.prototype.constructor.WrappedComponent.prototype;
        } else {
            console.warn('Trying to extend an invalid component.');
            return comp;
        }
    }

    let prototypeName: string = proto.constructor.name;
    if (prototypeName.search(/^React.*Component.*/) < 0 && proto.__proto__) {
        for (let propertyName of Object.getOwnPropertyNames(proto)) {
            if (!comp.prototype[propertyName]) {
                let type: string = typeof proto[propertyName];
                if (type === 'function') {
                    // It's a regular function
                    comp.prototype[propertyName] = function (...args: any[]) {
                        return this.wrappedInstance[propertyName](args);
                    };
                } else if (type === 'undefined') {
                    // It's a property
                    Object.defineProperty(comp.prototype, propertyName, {
                        get: function () {
                            return (this as any).wrappedInstance[propertyName];
                        },
                        set: function (value: any) {
                            (this as any).wrappedInstance[propertyName] = value;
                        }
                    });
                }
            }
        }

        return exposeWrappedMethods(comp, proto.__proto__);
    }

    return comp;
}

通过简单地用 包裹你的connect()电话来使用它exposeWrappedMethods。它将添加您自己的类（和子类）中的所有方法和属性，但不会覆盖已经存在的方法（即来自 React.Component 基类的方法）。

export default exposeWrappedMethods(
    connect<any, any, Properties>(
        (state: ApplicationState) => state.counter,
        CounterState.actionCreators,
        null,
        { pure: false, withRef: true } // It requires use of "withRef: true"
    )(Counter)) as typeof Counter;

希望您（或其他人）觉得它有用。

/卢卡斯

其它你可能感兴趣的问题
上一篇Slic3r 预览中的粉红色代表什么？如果它表示有问题，我该如何解决？ 下一篇映射数组时如何为 React 子项指定键