<div> <p> के वंशज के रूप में प्रकट नहीं हो सकते

Question 1

मैं यह देख रहा हूं। यह एक रहस्य नहीं है कि इसके बारे में क्या शिकायत है:

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

धन्यवाद।

Question 2

यह त्रुटि आती सामग्री यूआई का उपयोग करते समय यदि <Typography> https://material-ui.com/api/typography/ , तो आप आसानी से बदल सकते हैं <p>एक करने के लिए <span>की मान बदलकर componentकी विशेषता <Typography>तत्व:

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

टाइपोग्राफी डॉक्स के अनुसार:

घटक: रूट नोड के लिए उपयोग किया जाने वाला घटक। या तो एक DOM तत्व या एक घटक का उपयोग करने के लिए एक स्ट्रिंग। डिफ़ॉल्ट रूप से, यह संस्करण को एक अच्छे डिफ़ॉल्ट शीर्षक घटक में मैप करता है।

इसलिए टाइपोग्राफी <p>एक समझदार डिफ़ॉल्ट के रूप में चुन रहा है , जिसे आप बदल सकते हैं। साइड इफेक्ट के साथ आ सकता है ... मेरे लिए काम किया।

Question 3

चेतावनी संदेश के आधार पर, घटक ReactTooltip एक HTML प्रदान करता है जो इस तरह दिख सकता है:

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

इस दस्तावेज़ के अनुसार , एक <p></p>टैग में केवल इनलाइन तत्व हो सकते हैं। इसका मतलब है कि <div></div>टैग को अंदर रखना गलत होना चाहिए, क्योंकि divटैग एक ब्लॉक तत्व है। अनुचित घोंसले के कारण अतिरिक्त टैग प्रदान करने जैसे ग्लिच हो सकते हैं, जो आपकी जावास्क्रिप्ट और सीएसएस को प्रभावित कर सकते हैं।

यदि आप इस चेतावनी से छुटकारा पाना चाहते हैं, तो आप चाहें तो ReactTooltip घटक को अनुकूलित कर सकते हैं, या इस चेतावनी को ठीक करने के लिए निर्माता की प्रतीक्षा कर सकते हैं।

Question 4

यदि आप देख रहे हैं कि यह कहाँ हो रहा है, तो कंसोल में आप उपयोग कर सकते हैं: document.querySelectorAll(" p * div ")

Question 5

आपका घटक किसी अन्य घटक (जैसे कि <Typography> ... </Typography>) के अंदर प्रदान किया जा सकता है । इसलिए, यह आपके घटक को लोड करेगा <p> .. </p>जिसके अंदर अनुमति नहीं है।

फिक्स: निकालें <Typography>...</Typography>क्योंकि यह केवल सादे पाठ के लिए <p>...</p>या किसी अन्य पाठ तत्व जैसे शीर्षकों के लिए उपयोग किया जाता है ।

Question 6

मुझे सामग्री UI घटकों का उपयोग करके यह चेतावनी मिली है , फिर मैं component="div"नीचे दिए गए कोड के अनुसार प्रोप का परीक्षण करता हूं और सब कुछ सही हो गया:

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 टैग टैग होता है और डिफ़ॉल्ट HTML टैग pटैग होता है, इसलिए अब चेतावनी होती है।

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

Question 7

मेरे पास एक समान मुद्दा था और "पी" के बजाय "डिव" में घटक लपेट दिया गया और त्रुटि दूर हो गई।

Question 8

यह ब्राउज़रों की एक बाधा है। आपको ऐप के रेंडर मेथड में डिव या आर्टिकल या ऐसा कुछ इस्तेमाल करना चाहिए क्योंकि इस तरह से आप जो भी चाहें उसे अंदर रख सकते हैं। पैराग्राफ टैग केवल सीमित सेटों वाले टैग्स तक सीमित होते हैं (ज्यादातर स्वरूपण पाठ के लिए टैग। आपके पास पैराग्राफ के अंदर एक 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">और इसे उचित रूप से स्टाइल करते हैं, तो आप जो चाहें प्राप्त कर सकते हैं।

Question 9

यदि आप उपयोग कर रहे हैं ReactTooltip, तो चेतावनी को गायब करने के लिए, आप अब wrapperएक मान को spanइस तरह से जोड़ सकते हैं , जैसे:

<ReactTooltip wrapper="span" />

चूंकि spanएक इनलाइन तत्व है, इसलिए इसे अब शिकायत नहीं करनी चाहिए।

Question 10

मुझे रिएक्ट में <Card.Text>एक <Card>घटक के एक अनुभाग के अंदर एक कस्टम घटक का उपयोग करने से मिला । मेरे कोई भी घटक p टैग में नहीं थे

Question 11

चेतावनी केवल इसलिए दिखाई देती है क्योंकि डेमो कोड है:

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