Как передать детей компонентам React Reusable? - PullRequest
Новая
       7

Как передать детей компонентам React Reusable?

0 голосов
/ 17 апреля 2020

Я хочу создать компоненты многократного использования с передачей других компонентов точно так же, как это делают библиотеки пользовательского интерфейса.

Например, скажем, я хочу построить компонент Card,

Один из возможных способов - передать компоненты так же, как реквизиты: 

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

Но мне было интересно, как его сделано, когда мы называем это так: 

return (
  <Card>
    <Card.Header> 
      // I can put whatever I want here ...
    </Card.Header>

    <Card.Body>
      <div>
        // The same goes here too ..
      </div>
    </Card.Body>
  </Card>
);

Есть ли простой способ сделать это с функциональными компонентами?

1 Ответ

0 голосов
/ 17 апреля 2020

На самом деле, очень просто, что вы не можете себе это представить, просто сделайте компонент Body и Header отдельно в папке компонентов Card и в index.js компонента Card, импортируйте их оба , присоедините к компоненту Card, а затем export default Card. это может быть компонент формы ant.design:

Head компонент в отдельном файле: 

import React from "react";

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

export default Head;

Body компонент в отдельном файле file: 

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