[reactjs] <div>는 <p>의 하위 항목으로 나타날 수 없습니다.

Program / 글쓴이

나는 이것을보고있다. 그것이 무엇에 대해 불평하는지는 미스터리가 아닙니다.

Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>. See ... SomeComponent > p > ... > SomeOtherComponent > ReactTooltip > div.

저는 SomeComponent및 의 작성자입니다 SomeOtherComponent. 그러나 후자는 외부 종속성 ( ReactTooltipfrom react-tooltip)을 사용하고 있습니다. 이것이 외부 의존성이라는 것이 필수적이지는 않지만 여기서 “내가 통제 할 수없는 코드”라는 주장을 시도 할 수 있습니다.

중첩 된 구성 요소가 (겉보기에) 잘 작동한다는 점을 감안할 때이 경고에 대해 얼마나 걱정해야합니까? 그리고 어쨌든 이것을 변경하는 방법은 무엇입니까 (외부 종속성을 다시 구현하고 싶지 않다면)? 내가 아직 알지 못하는 더 나은 디자인이 있습니까?

완전성을 위해 여기에 SomeOtherComponent. 을 렌더링 this.props.value하고 마우스를 가져 가면 “Some tooltip message”라는 도구 설명이 표시됩니다.

class SomeOtherComponent extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const {value, ...rest} = this.props;
    return <span className="some-other-component">
      <a href="#" data-tip="Some tooltip message" {...rest}>{value}</a>
      <ReactTooltip />
    </span>
  }
}

감사합니다.

답변

머티리얼 UI <Typography> https://material-ui.com/api/typography/ 를 사용하는 동안이 오류가 발생 하면 요소 의 속성 값을 변경하여 <p>를로 쉽게 변경할 수 있습니다 .<span>component<Typography>

<Typography component={'span'} variant={'body2'}>

타이포그래피 문서에 따르면 :

component : 루트 노드에 사용되는 구성 요소입니다. DOM 요소 또는 구성 요소를 사용하는 문자열입니다. 기본적으로 변형을 좋은 기본 헤드 라인 구성 요소에 매핑합니다.

따라서 타이포그래피는 <p>현명한 기본값으로 선택 되며 변경할 수 있습니다. 부작용이있을 수 있습니다 … 나를 위해 일했습니다.

답변

경고 메시지에 따라 ReactTooltip 구성 요소는 다음과 같은 HTML을 렌더링합니다.

<p>
   <div>...</div>
</p>

이에 따라 문서 하는 <p></p>태그는 인라인 요소를 포함 할 수 있습니다. 이는 태그가 블록 요소 <div></div>이기 때문에 내부 에 태그를 넣는 것이 부적절해야 함을 의미 합니다 div. 부적절한 중첩은 추가 태그 렌더링과 같은 결함을 유발 하여 자바 스크립트 및 CSS에 영향을 미칠 수 있습니다.

이 경고를 제거하려면 ReactTooltip 구성 요소를 사용자 지정하거나 작성자가이 경고를 수정할 때까지 기다릴 수 있습니다.

답변

이 문제가 발생하는 위치를 찾고 있다면 콘솔에서 다음을 사용할 수 있습니다. document.querySelectorAll(" p * div ")

답변

구성 요소는 다른 구성 요소 (예 🙂 내에서 렌더링 될 수 있습니다 <Typography> ... </Typography>. 따라서 <p> .. </p>허용되지 않는 내부 구성 요소를로드합니다 .

수정 : <Typography>...</Typography>내부의 일반 텍스트 <p>...</p>또는 제목과 같은 다른 텍스트 요소 에만 사용되므로 제거 합니다.

답변

Material UI 구성 요소 를 사용하여이 경고를받은 다음 component="div"as prop을 아래 코드로 테스트 하고 모든 것이 정확 해졌습니다.

import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';

<Typography component="span">
  <Grid component="span">
    Lorem Ipsum
  </Grid>
</Typography>

사실이 경고는 머티리얼 UI에서 Grid컴포넌트 div의 기본 TypographyHTML 태그가 p태그이고 기본 HTML 태그가 태그이기 때문에 발생합니다. 이제 경고가 발생합니다.

Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>

답변

이것은 브라우저의 제약입니다. App의 render 메서드에서 div 나 article 등을 사용해야합니다. 그렇게하면 원하는 것을 그 안에 넣을 수 있기 때문입니다. 단락 태그는 제한된 태그 집합 만 포함하도록 제한됩니다 (대부분 텍스트 서식을 지정하는 태그입니다. 단락 안에 div가있을 수 없음)

<p><div></div></p>

유효한 HTML이 아닙니다. 사양에 나열된 태그 누락 규칙 당은 <p>태그가 자동으로 닫혀 <div>잎 태그 </p>일치하지 않고 태그를 <p>. 브라우저는 <p>다음에 열린 태그 를 추가하여 수정을 시도 할 수있는 권한 이 있습니다 <div>.

<p></p><div></div><p></p>

<div>내부에 넣을 수 없으며 <p>다양한 브라우저에서 일관된 결과를 얻을 수 없습니다 . 브라우저에 유효한 HTML을 제공하면 더 잘 작동합니다.

당신은 넣을 수 있습니다 <div>돌며 <div>당신이 당신의 교체, 그래서 만약 불구 <p>과 <div class="p">그것을 적절하게, 당신은 당신이 원하는 것을 얻을 수와 스타일을.

답변

경고는 데모 코드에 다음과 같은 경우에만 나타납니다.

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>  // <==NOTE P TAG HERE
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

다음과 같이 변경하면 처리됩니다.

function TabPanel(props) {
    const {children, value, index, classes, ...other} = props;

    return (
        <div
            role="tabpanel"
            hidden={value !== index}
            id={`simple-tabpanel-${index}`}
            aria-labelledby={`simple-tab-${index}`}
            {...other}
        >
            {value === index && (
                <Container>
                    <Box>   // <== P TAG REMOVED
                        {children}
                    </Box>
                </Container>
            )}
        </div>
    );
}