Question

我有这个简单的组件

class App extends React.Component {
  a = () => null
  b = () => null
  c = () => null

  render() {
    return (<div>hey123</div>)
  }
}

这是我的第二个组件，参考第一个

class BApp extends React.Component {
  setComponentRef = ref => {
    console.log('ref', ref)
    this.playerComponentRef = ref
  }
  render() {
    return (
      <div>
        <App ref={this.setComponentRef} />
      </div>)
  }  
}

在这种情况下在console.log中我将收到所有App组件的功能（a，b，c）但如果我在Recompose.withState组件上使用App，我将不再收到它们。看这里的例子 https://codepen.io/anon/pen/qYjpoE?editors=1111

看到工作方式swtich

<ModifyedApp ref={this.setComponentRef} />

到

<App ref={this.setComponentRef} />

我在这里想念的是什么？为什么使用Recompose HOC删除App类组件内部函数？

感谢。

Answer 1

您可以将函数SELECT SHOP_NAME, SHOP_ADDRESS, SHOP_PHONE, SHOP_OWNER, TABLE1.PURCHASE_SUM AS SHOP_SUM FROM ( SELECT PURCHASE.SHOP_ID, SUM(PURCHASE_SUM) AS SHOP_SUM FROM PURCHASE JOIN SHOP ON SHOP.SHOP_ID = PURCHASE.SHOP_ID WHERE SHOP_TYPE = 5 GROUP BY PURCHASE.SHOP_ID ) AS TABLE1 JOIN SHOP ON SHOP.SHOP_ID = TABLE1.SHOP_ID传递给组件，然后像

一样向其提供App实例

providerRef

在Recompose的情况下，它是一个HOC，因此ref将应用于HOC而不是内部组件，一些库提供class BApp extends React.Component { setComponentRef = ref => { console.log('ref', ref) this.playerComponentRef = ref } render() { return ( <div> <App providerRef={this.setComponentRef} /> </div>) } } class App extends React.Component { a = () => null b = () => null c = () => null componentDidMount() { this.props.providerRef(this); } render() { return (<div>hey123</div>) } }钩子来使用withRef访问innerComponent ref，但是我不确定它在this.playerComponentRef.getWrappedInstance()中的可用性。

Answer 2

HOC将在儿童之外创建一个新组件。因此，如果您将子组件包装在HOC中并尝试接收包装组件的参考，您将获得 HOCs参考。

这里有一个解决方法 - 只需将父组件中的ref传递给the hoc中的子项 - 只需代理ref。

使用重构组件作为参考时丢失函数

2 个答案: