无法通过 ref 访问子函数

最初一切正常，我有一个类似的东西。这

  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<</p>

div class="one_answers"导入了连接>

connect()接受option作为第四个参数。在此选项参数中，您可以将标志withRef设置为 true。在此之后，您可以使用类似getWrappedInstance()访问 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)

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

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 层的无状态组件。

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

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

只需用 exposeWrappedMethods 包装您的connect()通话即可使用它。它将从您自己的类（和子类）中添加所有方法和属性，但不会覆盖已经存在的方法（即来自 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;

希望您（或其他人）发现它有用。

/卢卡斯

相关内容

最新更新

热门标签：