反应包装组件不呈现。

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 儿童API来操作它的直接子程序，并为它提供额外的支持。在这种情况下，折叠期望子程序是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演示

虽然这是肯定可行的，但这并不是建议的办法，因为我们可能仍然缺少一些他们已经说明的直接关系。要了解这与rc-collapse的工作方式，AntD在下面使用：

来源