<div>, <p> soyundan gelemez

Bunu görüyorum. Neden şikayet ettiği bir sır değil:

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

Ben yazarı olduğum SomeComponentve SomeOtherComponent. Ancak ikincisi harici bir bağımlılık kullanıyor ( ReactTooltipkimden react-tooltip). Muhtemelen bunun harici bir bağımlılık olması gerekli değildir, ancak buradaki argümanı "kontrolüm dışında olan bir kod" olarak denememe izin veriyor.

Yuvalanmış bileşenin gayet iyi çalıştığı (görünüşte) göz önüne alındığında, bu uyarı hakkında ne kadar endişelenmeliyim? Ve yine de bunu nasıl değiştirebilirim (harici bir bağımlılığı yeniden uygulamak istemiyorsam)? Henüz farkında olmadığım daha iyi bir tasarım var mı?

Tamlık uğruna, işte uygulaması SomeOtherComponent. Yalnızca oluşturulur this.props.valueve üzerine gelindiğinde: "Bazı araç ipucu mesajı" yazan bir araç ipucu:

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

Teşekkür ederim.

Material UI <Typography> https://material-ui.com/api/typography/ kullanılırken bu hata meydana gelirse , elementin özniteliğinin değerini değiştirerek kolayca <p>a <span>olarak değiştirebilirsiniz :component<Typography>

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

Tipografi belgelerine göre:

bileşen: Kök düğüm için kullanılan bileşen. DOM öğesi veya bileşen kullanılacak bir dize. Varsayılan olarak, varyantı iyi bir varsayılan başlık bileşeniyle eşler.

Yani Tipografi, <p>değiştirebileceğiniz mantıklı bir varsayılan olarak seçim yapıyor. Yan etkilerle gelebilir ... benim için çalıştı.

Uyarı mesajına bağlı olarak, ReactTooltip bileşeni şuna benzeyen bir HTML oluşturur:

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

Bu belgeye göre , bir <p></p>etiket yalnızca satır içi öğeler içerebilir. Bu <div></div>, divetiket bir blok öğesi olduğundan, içine bir etiket koymanın uygunsuz olması gerektiği anlamına gelir . Yanlış iç içe yerleştirme , fazladan etiketlerin oluşturulması gibi sorunlara neden olabilir ve bu da javascript ve css'nizi etkileyebilir.

Bu uyarıdan kurtulmak istiyorsanız, ReactTooltip bileşenini özelleştirmek veya oluşturucunun bu uyarıyı düzeltmesini beklemek isteyebilirsiniz.

Bunun nerede olduğunu arıyorsanız, konsolda şunları kullanabilirsiniz: document.querySelectorAll(" p * div ")

Bileşeniniz başka bir bileşenin (a gibi <Typography> ... </Typography>) içinde işlenebilir . Bu nedenle, bileşeninizi <p> .. </p>izin verilmeyen bir içine yükleyecektir .

Düzeltme: Kaldır <Typography>...</Typography>çünkü bu yalnızca bir <p>...</p>veya başlıklar gibi başka herhangi bir metin öğesi içindeki düz metin için kullanılır .

Bu uyarıyı Material UI bileşenlerini kullanarak aldım , ardından component="div"as prop'u aşağıdaki koda test ettim ve her şey doğru oldu:

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

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

Aslında bu uyarı, Malzeme Kullanıcı Arabiriminde Gridbileşenin divvarsayılan TypographyHTML etiketinin etiket olması ve varsayılan HTML etiketinin etiket olması pnedeniyle oluşur. Artık uyarı gerçekleşir,

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

Bu, tarayıcıların bir kısıtlamasıdır. App render yönteminde div veya article veya bunun gibi bir şey kullanmalısınız çünkü bu şekilde içine istediğinizi koyabilirsiniz. Paragraf etiketleri, yalnızca sınırlı bir etiket kümesi içermekle sınırlıdır (çoğunlukla metni biçimlendirmek için etiketler. Paragraf içinde bir div olamazsınız.

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

geçerli HTML değil. Spec listelenen etiket ihmal kuralları gereği, <p>etiketi otomatik tarafından kapatılır <div>yaprakları etiketi, </p>bir eşleme olmadan etiketi <p>. Tarayıcı, <p>şunlardan sonra açık bir etiket ekleyerek düzeltmeyi deneme hakkına sahiptir <div>:

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

İçine bir a <div>ekleyip <p>çeşitli tarayıcılardan tutarlı sonuçlar alamazsınız . Tarayıcılara geçerli HTML sağlayın ve daha iyi davranacaklardır.

Sen koyabilirsiniz <div>bir iç <div>Eğer değiştirmek eğer öyleyse olsa <p>ile <div class="p">uygun şekilde, istediğini elde edebilirsiniz ve stil.

Uyarı yalnızca demo kodunun aşağıdakilere sahip olması nedeniyle görünür:

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

Bunu şu şekilde değiştirirseniz hallederiz:

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

Benzer bir sorunla karşılaştım ve bileşeni "p" yerine "div" içine sardım ve hata ortadan kalktı.

Kullanıyorsanız ReactTooltip, uyarının kaybolmasını sağlamak için, artık aşağıdaki gibi wrapperdeğerine sahip bir destek ekleyebilirsiniz span:

<ReactTooltip wrapper="span" />

Yana spanbir satır içi unsurdur, artık şikayet etmeli.

Bunu , React'teki <Card.Text>bir <Card>bileşenin bir bölümünde özel bir bileşen kullanarak aldım . Bileşenlerimden hiçbiri p etiketlerinde değildi

aldığım hata

 <p>
  <UserList userId={post.id} />
 </p>

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>bu hatayı gösteriyor çünkü Kullanıcı Listesinin içinde <div>UserList</div> çok yanlış

- Standart p veya div içindeki herhangi bir etiketi çağırabiliriz

- Ama benim durumumda p içinde div olarak adlandırıyorum, bu yüzden hata alıyorum

olmalı

   <div>
      <UserList userId={post.id} />
     </div>