Question

让我们说我有一个带有渲染功能的reactJS组件，如下所示：

  render(){
    return(
        <div>
          <OnBoardingHeader title={title} subTitle={subtitle} modalFlag={modalFlag}></OnBoardingHeader>
          <OnBoardingStepsHandler  displayContent={this.state.displayContent} modalFlag={modalFlag}></OnBoardingStepsHandler>
          <div className={modalFlag?"onBoarding-modal actions":"ui center aligned container"}>
              <div className="ui  left labeled icon button" onCLick={this.showPrevious}>
                Pre
                <i className="left arrow icon"></i>
              </div>
              <div className="ui  right labeled icon button" onClick={this.showNext}>
                Next
                <i className="right arrow icon"></i>
              </div>
          </div>
        </div>
    )
  }

点击“下一个”和“上一个”按钮，我更改了displayContent的值，其中说明了我的内容部分需要提供的内容。

displayContent is another react component.

现在有一个场景，在更改此displayContent之前，我需要访问displayContent中的值。

我的意思是，我们假设我们在第一步有一个表单，现在点击next我要验证此表单，然后继续step two，在其他意义上调用我的下一个功能。

现在，这个表单有自己的验证功能，我需要调用它。同样，其他步骤都有自己的验证功能，我需要在进入下一步之前调用它。

情景与此非常相似，https://gist.github.com/jamesgpearce/53a6fc57677870f93248 除了我的next和previous的控制权与父母一起。不是和孩子在一起。

现在，我的问题是如何在我的父组件中访问我孩子的组件功能。我不确定这是否可取。我的限制是，我不希望我的下一个和之前的控件与孩子。

有什么建议吗？

Answer 1

我构建了自己的向导组件，其中的要求听起来与我必须做的相似。基本上每个子组件都在内部执行自己的验证，并且应该执行this.props.onValid和this.props.onInvalid以及一些有用的信息，您希望在每次验证后将其冒泡到父级。作为父级，您向它们注入一个回调，以查看特定内容（子）是否已在内部通过验证测试。

//parent
export default () => {
  return <Child onValid={onChildValid} onInvalid={onChildInvalid}/>;
}

//child
export default ({ onValid, onInvalid }) => {
  //do validation based on user activity
  //call onValid/onInvalid whenever the validation is done
}

您可以更多地使用onDirty等来查看某些内容是否已被用户更改。

Answer 2

为什么特别需要访问子组件？

将处理程序传递给子项使用（可能在验证幻灯片后）以进行导航。大致（非常）：

在父母：

render = () => {
  // ...
  <SomeChildComponent nextHandler={this.nextHandler} />
  // ...
}

在孩子身上：

// ...
validate = () => {
    if (whateverValid()) {
        this.props.nextHandler();
    }
}
// ...

父级nextHandler设置所需的状态，重新渲染，可能会显示下一张幻灯片，显示摘要等等。

我们使用基本上这种机制实现了前/后/上/下向导滑块，在单独的JS对象中使用幻灯片声明，使用字符串或函数来指示下一个和上一个幻灯片组件是什么。（函数选项是我们需要检查向导状态并根据当前向导状态转到任意幻灯片。）

如果按钮必须在父母中，那么您还有一个额外的步骤。

（同样，这是一个非常粗略的估计。）

在父级

中

validationHandler = (isCurrentStepValid) => {
  this.setState({ isCurrentStepValid });
}

nextHandler = () => {
  if (this.state.isCurrentStepValid) {
    // Handle valid state, e.g., advance wizard
  } else {
    // Handle invalid state, e.g., don't advance wizard
  }
}

render = () => {
  <SomeChildComponent validationHandler={this.validationHandler} />

  <NextButton onClick={this.nextHandler} />
}

在孩子中

isComponentValid = () => {
  return whateverValidationRequired;
}

validate = () => this.props.validationHandler(this.isComponentValid());

React Component，验证paren组件中子组件的数据

2 个答案: