<div>は<p>の子孫として表示できません

私はこれを見ています。それが不平を言っているのは謎ではありません：

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

私は著者のだSomeComponentとSomeOtherComponent。ただし、後者は外部依存関係（ReactTooltipからreact-tooltip）を使用しています。これが外部の依存関係である必要はないかもしれませんが、「自分の制御不能なコード」であるという議論をここで試すことができます。

ネストされたコンポーネントが（一見）正常に動作している場合、この警告についてどの程度心配する必要がありますか？とにかくこれを変更するにはどうすればよいですか（外部依存関係を再実装したくない場合）？私がまだ気付いていないより良いデザインがあるかもしれませんか？

完全を期すために、ここにの実装を示しSomeOtherComponentます。レンダリングするだけでthis.props.value、ホバーすると、「一部のツールチップメッセージ」と表示されるツールチップ：

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>
  }
}

ありがとうございました。

Material 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タグはブロック要素であるため、タグをタグ内に配置することは不適切です。不適切なネストは、余分なタグのレンダリングなどのグリッチを引き起こす可能性があり、JavaScriptと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>

実際、この警告は、Material UIではGridコンポーネントのデフォルトのHTMLタグがdivtagであり、デフォルトのTypographyHTMLタグがptagであるために発生します。

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

同様の問題があり、コンポーネントを「p」ではなく「div」でラップしたため、エラーは解消しました。

これはブラウザの制約です。Appのrenderメソッドでは、divやarticleなどを使用する必要があります。これは、好きなものをその中に配置できるためです。段落タグは、限られたタグセット（主にテキストをフォーマットするためのタグ）のみを含むように制限されています。段落内にdivを含めることはできません

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

有効なHTMLではありません。仕様に記載されているタグ省略ルールごとに、<p>タグは自動的によって閉鎖されている<div>葉タグ、</p>マッチングなしタグ<p>。ブラウザは、次のようにオープン<p>タグを追加して修正を試みる権利があります<div>。

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

<div>内部にa <p>を置くことはできず、さまざまなブラウザから一貫した結果を得ることができます。ブラウザーに有効なHTMLを提供すると、ブラウザーの動作が向上します。

あなたは置くことができます<div>内側に<div>あなたが交換した場合のでかかわら<p>で<div class="p">適切にとスタイルを、あなたが欲しいものを手に入れることができます。

を使用している場合ReactTooltip、警告を非表示にするにwrapperはspan、次のように値がのプロップを追加できます。

<ReactTooltip wrapper="span" />

spanはインライン要素であるため、文句を言うべきではありません。

これは、Reactのコンポーネントの<Card.Text>セクション内でカスタムコンポーネントを使用することで得られました<Card>。どのコンポーネントも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>
    );
}