警告：validateDOMNesting（...）： <div> 不能作为<p>的后代出现

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方法...看起来好像返回一个段落，但它应该返回一个React组件...

    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。所以，有人建议我找到一种解决方法，消除在浏览器中出现的错误。

- Suhail Moh

---

我真的不太理解第一部分。你能再清楚一点吗？ - undefined

谢谢。我刚刚更新了它。 - undefined

没问题，兄弟... :) - undefined

Answer 1

警告信息表明，您不能像这样在p标签中使用div标签：

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

这是无效的 html。 p 标签可以包含 内联元素，而不是块级元素。

因此，你的某个组件使用了这样的标签。你需要修复它（只需用 div 标签替换 p 标签即可）。

---

或者，库本身可能已经使用了这种标签？你可以自己修复或提交问题等待修复。

- Bhojendra Rauniyar

---

检查库本身是否在其他地方使用，或者提交错误报告。 - undefined

谢谢。我在内部组件中使用了一个p标签。那样做是正确的。现在它正常工作了。 - undefined

很高兴，你抓住了它。 - undefined

Answer 2

你可以始终将你的Material-UI按钮包裹在<ButtonGroup>中。这在我的情况下很有帮助。

<ButtonGroup
  orientation="vertical"
  color="primary"
  aria-label="vertical outlined primary button group"
>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

- Martyna Wójcik

---

请直接将代码片段粘贴在帖子中，而不是以图像形式。 - undefined