나는 이것을보고있다. 그것이 무엇에 대해 불평하는지는 미스터리가 아닙니다.
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>
);
}
