Question

我希望能够清楚地使用React refs来调用子函数。我有一个Parent组件，它是一个带有几个按钮的工具栏，在子组件中我可以访问库的导出功能。我想在父组件中单击按钮调用此导出功能。目前我正在使用React refs来实现这个目标：

Parent.js [ref]

class Parent extends React.Component {

  onExportClick = () => {
    this.childRef.export();
  }

  render() {
    return (
      <div>
        <button onClick={this.onExportClick} />Export</button>
        <Child ref={(node) => this.childRef = node;} />
      </div>
    )
  }
}

Child.js [参考]

class Child extends React.Component {

  export() {
    this.api.exportData();
  }

  render() {
    <ExternalLibComponent
      api={(api) => this.api = api}
    />
  }
}

此解决方案运行正常，但如果这是最佳做法，我看到了lot disagreement。 React的官方doc在refs上说我们应该“避免使用refs做任何可以声明性地完成的事情”。在一个类似问题的discussion post中，React团队的Ben Alpert说“refs是针对这个用例设计的”，但通常你应该尝试通过传递一个prop来声明性地做。

如果没有ref：

，我将如何以声明方式执行此操作

Parent.js [声明]

class Parent extends React.Component {

  onExportClick = () => {
    // Set to trigger props change in child
    this.setState({
      shouldExport: true,
    });

    // Toggle back to false to ensure child doesn't keep 
    // calling export on subsequent props changes
    // ?? this doesn't seem right
    this.setState({
      shouldExport: false,
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.onExportClick} />Export</button>
        <Child shouldExport={this.state.shouldExport}/>
      </div>
    )
  }
}

Child.js [声明]

class Child extends React.Component {

  componentWillReceiveProps(nextProps) {
    if (nextProps.shouldExport) {
      this.export();
    }
  }

  export() {
    this.api.exportData();
  }

  render() {
    <ExternalLibComponent
      api={(api) => this.api = api}
    />
  }
}

尽管refs被视为此问题的“逃避舱口盖”，但这种声明性解决方案看起来有点hacky，并没有比使用refs更好。我应该继续使用refs来解决这个问题吗？或者我应该采用有点hacky声明方法？

Answer 1

您不需要将DEVICEID* identity = [device_IDENTIFY command]; DEVICEID* status= [device_STATUS command]; DEVICEID* identity = [device_POWER command]; NSArray *array = @[identity, status, identity]; //Created array with 3 DEVICEID* objects. NSMutableArray<DEVICEID*>* device_a = [array mutableCopy]; //created mutable copy from An immutable one.设置回shouldExport，而是可以检测到更改：

false

然后componentWillReceiveProps(nextProps) { if (nextProps.shouldExport !== this.props.shouldExport) { this.export(); } }的每次切换都会导致一次导出。然而，这看起来很奇怪，我使用了一个我增加的数字：

shouldExport

Answer 2

我现在在很多场合遇到了同样的问题，而且由于React团队不鼓励它，我将使用props方法进行后续开发，但问题是有时你想要将值返回给父组件，有时你需要检查孩子的状态来决定是否触发事件，因此refs方法永远是我最后的避风港，我建议你做同样的事情

使用React refs调用子函数的最佳实践

2 个答案: