Question

我正在从父级向子级组件发送onPress事件，以便我可以调用该子级的帮助函数来更改其状态。

理想情况下，我会为此使用道具，但我使用的是我未编写且未维护的子组件。

我对实现此解决方案的最佳方法感兴趣。我使用的是react 16.5，由于依赖关系，无法升级。这是Expo 32.0.0 react-native项目的一部分。

我确实有可行的解决方案。我想知道这种解决方案是否是首选方法。请让我知道是否还有其他选择。

最终父母

setClickChild = click => {
  this.clickChild = click
}

render () {
    return (
       <SettingsCard
         titleText="Date of birth"
         onPress={() => this.clickChild()}
        >
          <DateSelect
            date={this.props.user.dob}
            onParentPress={this.setClickChild.bind(this)}
            onDateChange={newDate => {
              this.props.dobUpdate({ dob: newDate })
            }}
          />
        </SettingsCard>
     )
}

基于包装器类的子组件

class DateSelect extends Component {
  constructor (props) {
    super(props)
    this.child = React.createRef()
    this.callChildPopup.bind(this)
  }

  componentDidMount () {
    if (this.props.onParentPress) {
      this.props.onParentPress(this.callChildPopup)
    }
  }

  callChildPopup = () => {
    this.child.current.onPressDate()
  }

  render () {
    const { props } = this
    return (
      <DatePicker
        ref={this.child}
        date={props.date}
        onDateChange={date => props.onDateChange(date)}
      />
    )
  }
}

如您在上面的示例中看到的，我正在使用ref={this.child}，以便包装器类可以从我无法控制的组件中调用onPressDate()。这是传递不存在的道具（维护者未实现）的替代方法。

随后，我使用传递了包装器的onParentPress()函数来调用链的“上”链，并传递了callChildPopup()函数。我本可以这样做，但是我认为拆分功能可以使操作更容易。

然后我通过setClickChild将onParentPress函数发送给包装类，该函数将callChildPopup()传递给clickChild，这将由父级中的其他组件调用。

让我知道您是否认为这是一种反模式，或者是否有更好的选择。上面的示例有效，但并不理想。

从父级传递事件到子级会响应本机组件

最终父母

基于包装器类的子组件

0 个答案: