警告：validateDOMNesting(...): <div> 不能作为 <p> 的后代出现

Posted 2023-02-22

【中文标题】警告：validateDOMNesting(...): <div> 不能作为 <p> 的后代出现

【英文标题】：Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>

【发布时间】：2019-02-15 18:06:04

【问题描述】：

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

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。所以任何人都建议我一个解决方案来摆脱浏览器中出现的错误。

【问题讨论】：

我真的不明白第一部分。能说清楚一点吗？

谢谢。我刚刚更新了它。

没问题...:)

【参考方案1】：

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

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

这是无效的 html。 p 标记可以包含 inline elements 而不是块级元素。

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

---

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

【讨论】：

如果他们在某个地方使用或提交错误报告，请检查库本身。

谢谢。我在内部组件中使用了 p 标签。那个y。现在它可以正常工作了。

很高兴，你抓住了它。

【参考方案2】：

您始终可以将您的 Material-UI Button 包装在 <ButtonGroup> 中。

这对我有帮助。

【讨论】：

请直接在帖子中粘贴代码sn-p，不要粘贴图片。