<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

এই ত্রুটি দেখা দেয় মেটারিয়াল UI ব্যবহার করার সময় যদি <Typography> https://material-ui.com/api/typography/ , তাহলে আপনি খুব সহজেই পরিবর্তন করতে পারেন <p>একটি থেকে <span>এর মান পরিবর্তন করে componentএর অ্যাট্রিবিউট <Typography>উপাদান:

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

টাইপোগ্রাফি ডক্স অনুসারে:

উপাদান: মূল নোডের জন্য ব্যবহৃত উপাদান। হয় DOM উপাদান বা উপাদান ব্যবহার করার জন্য একটি স্ট্রিং। ডিফল্টরূপে, এটি একটি ভাল ডিফল্ট শিরোনাম উপাদান রূপান্তর মানচিত্র।

সুতরাং টাইপোগ্রাফিটি <p>একটি বুদ্ধিমান ডিফল্ট হিসাবে বাছাই করছে , যা আপনি পরিবর্তন করতে পারেন। পার্শ্ব প্রতিক্রিয়া সঙ্গে আসতে পারে ... আমার জন্য কাজ।

Question 3

সতর্কতা বার্তার উপর ভিত্তি করে, উপাদানটি প্রতিক্রিয়াশক্তিটি এমন একটি এইচটিএমএলকে রেন্ডার করে:

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

এই দস্তাবেজ অনুসারে , একটি <p></p>ট্যাগে কেবল ইনলাইন উপাদান থাকতে পারে। এর অর্থ <div></div>এটির ভিতরে ট্যাগ লাগানো অনুচিত হওয়া উচিত, যেহেতু divট্যাগটি একটি ব্লক উপাদান। অন্যায়ভাবে বাসা বাঁধার কারণে অতিরিক্ত ট্যাগগুলি সরবরাহ করার মতো সমস্যা দেখা দিতে পারে যা আপনার জাভাস্ক্রিপ্ট এবং সিএসএসকে প্রভাবিত করতে পারে।

আপনি যদি এই সতর্কতা থেকে মুক্তি পেতে চান তবে আপনি রিঅ্যাকটুলটিপ উপাদানটি কাস্টমাইজ করতে চাইতে পারেন, বা এই সতর্কতাটি ঠিক করার জন্য স্রষ্টার অপেক্ষা করতে পারেন।

Question 4

এটি কোথায় ঘটছে তা যদি সন্ধান করে থাকেন তবে কনসোলে আপনি এটি ব্যবহার করতে পারেন: document.querySelectorAll(" p * div ")

Question 5

আপনার উপাদানটি অন্য কোনও উপাদান (যেমন একটি <Typography> ... </Typography>) এর মধ্যে রেন্ডার হতে পারে । অতএব, এটি আপনার উপাদানটি একটি এর মধ্যে লোড করবে<p> .. </p> এমন কোনও যা অনুমোদিত নয়।

স্থির করুন: সরান <Typography>...</Typography>কারণ এটি কেবল কোনও <p>...</p>বা অন্য কোনও পাঠ্য উপাদানের যেমন শিরোনামের অভ্যন্তরে সরল পাঠ্যের জন্য ব্যবহৃত হয় ।

Question 6

আমি ম্যাটারিয়াল ইউআই উপাদান ব্যবহার করে এই সতর্কতাটি পেয়েছি , তারপরে আমি 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>

প্রকৃতপক্ষে, এই সতর্কতাটি ঘটে কারণ উপাদান ইউআইতে Gridউপাদানগুলির ডিফল্ট এইচটিএমএল ট্যাগ divট্যাগ হয় এবং ডিফল্ট Typographyএইচটিএমএল ট্যাগ ট্যাগ হয় p, সুতরাং এখন সতর্কতাটি ঘটে,

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

Question 7

এটি ব্রাউজারগুলির একটি সীমাবদ্ধতা। অ্যাপের রেন্ডার পদ্ধতিতে আপনার ডিভ বা নিবন্ধ বা এর মতো কিছু ব্যবহার করা উচিত কারণ আপনি যা চান তার ভিতরে রাখতে পারেন। অনুচ্ছেদে ট্যাগগুলি কেবলমাত্র সীমিত সেটগুলিতে সীমাবদ্ধ রয়েছে (বেশিরভাগ ট্যাগ বিন্যাসের পাঠ্যের জন্য। আপনার অনুচ্ছেদে কোনও ডিভ থাকতে পারে না

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

বৈধ এইচটিএমএল নয়। বৈশিষ্টটিতে তালিকাভুক্ত ট্যাগ বাদ দেওয়ার নিয়ম অনুসারে <p>ট্যাগটি স্বয়ংক্রিয়ভাবে ট্যাগটি বন্ধ হয়ে যায় <div>, যা </p>কোনও মিল ছাড়াই ট্যাগটিকে ছেড়ে দেয় <p>। ব্রাউজারটি তার <p>পরে একটি খোলা ট্যাগ যুক্ত করে এটি সংশোধন করার চেষ্টা করার অধিকারগুলির মধ্যে রয়েছে <div>:

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

আপনি একটি এর <div>ভিতরে একটি রাখতে পারবেন না <p>এবং বিভিন্ন ব্রাউজার থেকে ধারাবাহিক ফলাফল পেতে পারেন। বৈধ এইচটিএমএল সহ ব্রাউজারগুলি সরবরাহ করুন এবং তারা আরও ভাল আচরণ করবে।

আপনি কিছুটা <div>ভিতরে রাখতে পারেন <div>সুতরাং আপনি যদি এটির <p>সাথে প্রতিস্থাপন করেন <div class="p">এবং এটি যথাযথভাবে স্টাইল করেন তবে আপনি যা চান তা পেতে পারেন।

Question 8

সতর্কতাটি কেবলমাত্র ডেমো কোডের কারণে প্রদর্শিত হবে:

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

Question 9

আমার অনুরূপ সমস্যা ছিল এবং উপাদানটি "ডি" এর পরিবর্তে "পি" এর পরিবর্তে "ডিভ" এ মুড়ে ফেলা হয় এবং ত্রুটিটি চলে যায়।

Question 10

ReactTooltipসতর্কতা অদৃশ্য করতে আপনি যদি ব্যবহার করে থাকেন তবে আপনি এখন wrapperএর spanমতো একটি মান সহ একটি প্রপ যোগ করতে পারেন :

<ReactTooltip wrapper="span" />

যেহেতু এটি spanএকটি ইনলাইন উপাদান, এটি আর অভিযোগ করা উচিত নয়।

Question 11

আমি প্রতিক্রিয়াতে <Card.Text>কোনও <Card>উপাদানগুলির একটি বিভাগের অভ্যন্তরে একটি কাস্টম উপাদান ব্যবহার করে এটি পেয়েছি । আমার কোনও উপাদানই প ট্যাগগুলিতে ছিল না