Question

我想通过像UI库一样以特定方式传递其他组件来制作可重用的组件。

例如，假设我要构建Card组件，

一种可能的方法是像props一样传递组件：

result = list(map(lambda x,y:{**x, **y}, l1, l2))

但是我想知道当我们这样称呼它时是如何完成的：

return (
  <Card
    header={<MyHeader />}
    body={<MyBody />}
  />
)

是否有使用功能组件执行此操作的简便方法？

Answer 1

实际上，您无法想象它很简单，只需在Body组件文件夹和Header的{{1}}组件文件夹中分别制作Card和index.js组件Card组件将两者导入。附加到Card组件，然后附加export default Card。它可能是ant.design的{{3}}组件：

单独文件中的Head组件：

import React from "react";

const Head = () => (
    <div>
        // some codes
    </div>
);

export default Head;

其单独文件中的Body组件：

import React from "react";

const Body = () => (
    <div>
        // some codes
    </div>
);

export default Body;

现在在创建index.js组件的Card文件中：

import React from "react";
import Head from "./Head";
import Body from "./Body";

const Card = () => (
    <div>
        // some codes
    </div>
);

Card.Head = Head;
Card.Body = Body;

export default Card;

现在，在导入Card组件的任何地方，您都可以按照需要访问Body和Head：

import Head from "[pathToCardComponent]/Card";

~~~

<Card>
  <Card.Head>header</Card.Head>
  <Card.Body>body</Card.Body>
</Card>

如何将子级传递给React Reusable组件？

1 个答案: