React - упакованный компонент не рендерится

Question

Может ли кто-нибудь сказать мне разницу между двумя примерами ниже: верхний отображает правильно, а нижний вообще не отображает содержимое "XYZ"? Можете ли вы также сказать мне, почему они ведут себя по-разному, и как я могу «обернуть» такой компонент?

import React from 'react';
import "antd/dist/antd.css";
import {  Collapse  } from "antd";


const { Panel } = Collapse;


export default function ScraperList({ scraper }) {
    console.log(scraper);
  return (
  <Collapse accordion>
    <Panel header={scraper.name} key={scraper.id}>
      <p>XYZ</p>
    </Panel>

  </Collapse>
  );
}

import React from 'react';
import "antd/dist/antd.css";
import {  Collapse  } from "antd";


const { Panel } = Collapse;


function Scraper({ scraper: { id, name } }) {
  return (
    <Panel header={name} key={id}>
      <p>XYZ</p>
    </Panel>
  );
}

export default function ScraperList({ scraper }) {
    console.log(scraper);
  return (
  <Collapse accordion>
    <Scraper scraper={scraper}/>

  </Collapse>
  );
}

Я бы подумал, что они будут работать одинаково, потому что разметка будет одинаковой?

Answer 1

Это потому, что Collapse использует React Children API для манипулирования его прямыми дочерними элементами и предоставления ему дополнительных реквизитов. В этом случае Collapse ожидает, что дочерний элемент будет Panel, и, следовательно, дает ему дополнительные реквизиты, необходимые для завершения операции. Это делается с помощью cloneChild API.

React.cloneElement(
  element,
  [props],  // this is the extra props that can be passed into component.
  [...children] // this is for sending modified/new children
)

Когда вы добавляете в микс дополнительный компонент, такой как Scraper, Panel не получает упомянутые реквизиты и не может рендериться. Но вы можете переслать реквизиты на Panel через Scraper:

import {  Collapse  } from "antd";


const { Panel } = Collapse;


function Scraper(props) {
  return (
    <Panel {...props} header={props.scraper.name} key={props.scraper.id}>
      <p>XYZ</p>
    </Panel>
  );
}

export default function ScraperList({ scraper }) {
  return (
    <Collapse accordion>
      <Scraper scraper={scraper} />
    </Collapse>
  );
}

Stackblitz Demo

Хотя это, безусловно, может сработать, это не рекомендуется способ go об этом, поскольку мы все еще можем упускать некоторые прямые отношения, которые они объяснили. Чтобы увидеть, как это работает с rc-collapse, который использует AntD:

Source