Предупреждение: validateDOMNesting (...): <div>не может отображаться как потомок <p> - PullRequest
Новая
       7

Предупреждение: validateDOMNesting (...): <div>не может отображаться как потомок <p>

0 голосов
/ 11 сентября 2018

Я знаю, в чем проблема.Но я не могу найти решение.абзац не может содержать никаких других тегов.Но в моем случае я не использовал какие-либо теги абзаца. 

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 Ответ

0 голосов
/ 11 сентября 2018

В предупреждающем сообщении говорится, что внутри тега p нельзя использовать тег div, например: 

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

Это недопустимый HTML-код.Тег p может содержать встроенные элементы не элементы блочного уровня, такие как span, img, strong и т. Д.

Итак, один из ваших компонентов использует их.Вы должны это исправить.(Просто замените тег p на тег div)

Или сама библиотека могла бы использовать такое?Вы можете исправить это самостоятельно или подождать исправлений, отправив сообщение о проблеме.

...