警告：validateDOMNesting（...）： cannot appear as a descendant of

Question

我知道问题是什么。但我找不到解决方案。段落不能包含任何其他标签。但就我而言，我没有使用任何段落标签。

return (
  <div className={classes.root}>
    <Stepper activeStep={activeStep} alternativeLabel>
      {steps.map(label => {
        return (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
          </Step>
        );
      })}
    </Stepper>
    <div>
      {this.state.activeStep === steps.length ? (
        <div>
          <div>All steps completed</div>
          <Button onClick={this.handleReset}>Reset</Button>
        </div>
      ) : (
        <div>
          <div>{getStepContent(activeStep)}</div>
          <div>
            <Button
              disabled={activeStep === 0}
              onClick={this.handleBack}
              className={classes.backButton}
            >
              Back
            </Button>
            <Button variant="contained" color="primary" onClick={this.handleNext}>
              {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
            </Button>
          </div>
        </div>
      )}
    </div>
  </div>
);

} }

我的getStep方法..它看起来像返回一个段落。但它应该返回一个反应的组成部分..

    function getStepContent(stepIndex) {
  switch (stepIndex) {
    case 0:
      return <FormPart1 setFormPart1Value={getValueFormPart1.bind(this)} className={{
          alignContent:'center'
      }
      } />;
    case 1:
      return <FormPart2 />;
    case 2:
      return <PerformanceTable />;
    case 3:
        return <WorkHabitTable />;
    case 4:
        return <OtherDetails />;
    case 5:
        return <PerformanceOverall />;
    default:
      return 'Uknown stepIndex';
  }

此代码直接取自Material-UI。所以任何人都建议我一个解决方案来摆脱浏览器中出现的错误。

Answer 1

警告消息指出您不能在p标签内使用div标签，如：

<p>
 <div>some text</div>
</p>

这是无效的HTML。 p标签可以包含inline elements而不是块级元素，如span，img，strong等。

所以，你的一个组件正在使用这样的组件。你需要解决这个问题。 （只需用div标签替换p标签）

---

或者，图书馆本身可能已经使用过这样的？您可以自行修复或通过提交问题等待修复。