<div> không được xuất hiện dưới dạng con của <p>

Tôi đang thấy điều này. Nó không phải là một bí ẩn những gì nó đang phàn nàn:

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

Tôi là tác giả của SomeComponentvà SomeOtherComponent. Nhưng sau này là sử dụng một phụ thuộc bên ngoài ( ReactTooltiptừ react-tooltip). Có lẽ không cần thiết rằng đây là một phụ thuộc bên ngoài, nhưng nó cho phép tôi thử lập luận ở đây rằng đó là "một số mã ngoài tầm kiểm soát của tôi".

Tôi nên lo lắng đến mức nào về cảnh báo này, vì thành phần lồng nhau đang hoạt động tốt (dường như)? Và tôi sẽ làm cách nào để thay đổi điều này (miễn là tôi không muốn triển khai lại một phần phụ thuộc bên ngoài)? Có thể có một thiết kế tốt hơn mà tôi chưa biết không?

Vì lợi ích hoàn chỉnh, đây là cách thực hiện SomeOtherComponent. Nó chỉ hiển thị this.props.valuevà khi được di chuột qua: một chú giải công cụ cho biết "Một số thông báo chú giải công cụ":

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

Cảm ơn bạn.

Nếu lỗi này xảy ra khi sử dụng Material UI <Typography> https://material-ui.com/api/typography/ , thì bạn có thể dễ dàng thay đổi <p>thành a <span>bằng cách thay đổi giá trị của componentthuộc tính của <Typography>phần tử:

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

Theo các tài liệu về kiểu chữ:

component: Thành phần được sử dụng cho nút gốc. Là một chuỗi để sử dụng một phần tử DOM hoặc một thành phần. Theo mặc định, nó ánh xạ biến thể đến một thành phần dòng tiêu đề mặc định tốt.

Vì vậy, Typography được chọn <p>làm mặc định hợp lý, bạn có thể thay đổi. Có thể đi kèm với các tác dụng phụ ... đã làm việc cho tôi.

Dựa trên thông báo cảnh báo, thành phần ReactTooltip hiển thị một HTML có thể trông giống như sau:

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

Theo tài liệu này , <p></p>thẻ chỉ có thể chứa các phần tử nội tuyến. Điều đó có nghĩa là việc đặt một <div></div>thẻ bên trong nó phải không đúng cách, vì divthẻ là một phần tử khối. Việc lồng ghép không đúng cách có thể gây ra trục trặc như hiển thị các thẻ phụ , có thể ảnh hưởng đến javascript và css của bạn.

Nếu bạn muốn loại bỏ cảnh báo này, bạn có thể muốn tùy chỉnh thành phần ReactTooltip hoặc đợi người tạo khắc phục cảnh báo này.

Nếu bạn đang tìm kiếm nơi điều này đang xảy ra, trong bảng điều khiển, bạn có thể sử dụng: document.querySelectorAll(" p * div ")

Thành phần của bạn có thể được hiển thị bên trong một thành phần khác (chẳng hạn như a <Typography> ... </Typography>). Do đó, nó sẽ tải thành phần của bạn bên trong một thành phần <p> .. </p>không được phép.

Khắc phục: Loại bỏ <Typography>...</Typography>vì điều này chỉ được sử dụng cho văn bản thuần túy bên trong một <p>...</p>hoặc bất kỳ phần tử văn bản nào khác, chẳng hạn như tiêu đề.

Tôi nhận được cảnh báo này bằng cách sử dụng các thành phần Material UI , sau đó tôi kiểm tra phần component="div"hỗ trợ cho đoạn mã dưới đây và mọi thứ đều trở nên chính xác:

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

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

Trên thực tế, cảnh báo này xảy ra vì trong giao diện người dùng Material, thẻ HTML mặc định của Gridthành phần là divthẻ và Typographythẻ HTML mặc định là pthẻ, Vì vậy, bây giờ cảnh báo sẽ xảy ra,

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

Tôi đã gặp sự cố tương tự và gói thành phần trong "div" thay vì "p" và lỗi đã biến mất.

Đây là một hạn chế của các trình duyệt. Bạn nên sử dụng div hoặc article hoặc thứ gì đó tương tự trong phương thức kết xuất của Ứng dụng vì bằng cách đó, bạn có thể đặt bất cứ thứ gì bạn thích vào bên trong nó. Các thẻ đoạn văn bị giới hạn chỉ chứa một bộ thẻ giới hạn (chủ yếu là các thẻ để định dạng văn bản. Bạn không thể có một div bên trong một đoạn văn

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

không phải là HTML hợp lệ. Theo quy tắc bỏ qua thẻ được liệt kê trong thông số kỹ thuật, <p>thẻ sẽ tự động được đóng bởi <div>thẻ, điều này khiến </p>thẻ không có khớp <p>. Trình duyệt có quyền cố gắng sửa nó bằng cách thêm một <p>thẻ mở sau <div>:

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

Bạn không thể đặt <div>bên trong a <p>và nhận được kết quả nhất quán từ các trình duyệt khác nhau. Cung cấp cho các trình duyệt HTML hợp lệ và chúng sẽ hoạt động tốt hơn.

Bạn có thể đặt <div>bên trong một <div>mặc dù vậy nếu bạn thay thế của bạn <p>với <div class="p">và phong cách nó một cách thích hợp, bạn có thể có được những gì bạn muốn.

Nếu bạn đang sử dụng ReactTooltip, để làm cho cảnh báo biến mất, bây giờ bạn có thể thêm wrappermột giá trị có giá trị span, như sau:

<ReactTooltip wrapper="span" />

Vì spanlà một phần tử nội tuyến, nó sẽ không còn phàn nàn nữa.

Tôi có được điều này từ việc sử dụng một thành phần tùy chỉnh bên trong một <Card.Text>phần của một <Card>thành phần trong React. Không có thành phần nào của tôi nằm trong thẻ p

Cảnh báo chỉ xuất hiện vì mã demo có:

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

Thay đổi nó như thế này sẽ chăm sóc nó:

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