React - 如何将我想要的组件拾取到另一个模块

Question

请参阅下面的代码。 它是一个包含图像、标题、段落和按钮的 Tile 组件。 我的要求是我想使用此代码创建多种类型的图块（模块）。 例如没有图像，或者没有段落和按钮。

例如，如何在没有段落和按钮的情况下创建另一个图块（模块）。 （在没有段落和按钮的情况下，不能在下面创建相同的代码）

import React from 'react';
import Image from './../../../../src/components/atoms/image/image';
import Heading from './../../../../src/components/atoms/heading/heading';
import LinkIcon from './../../../../src/components/atoms/link-icon/link-icon';
import Paragraph from './../../../../src/components/atoms/paragraph/paragraph';

function GridTile(props) {
return (
 <div className={`grid-tile ${props.class}`}>
   <a href="#" className="grid-tile__link">
    <div className="grid-tile__image">
      <Image src="" />
    </div>
    <div className="grid-tile__content">
      <Heading
        tag="3"
        class=""
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
      />
      <Paragraph
        tag="p"
        text="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
        aliquip ex ea commodo consequat. "
      />
      <LinkIcon text="Read More" />
    </div>
    </a>
   </div>
 );
}
export default GridTile;

Answer 1

你可以根据你的道具来决定。

const GridTile(props) {

...

{props.showImage && <Image...}
{props.showHeading && <Heading...}

然后，您通过以下方式调用 GridTile：

<GridTile showImage={true} showHeading={true} />

如果您想要 defaultProps，这将取决于您的用例，全部为 false，然后在特殊情况下为 true。 但基本上，您显示的内容取决于您传递的道具或组件中声明的默认道具。 （或更好的默认值。）

Answer 2

一种方法是通过使用道具，所以父组件决定看什么。

您的代码将如下所示：

import Image from './../../../../src/components/atoms/image/image';
import Heading from './../../../../src/components/atoms/heading/heading';
import LinkIcon from './../../../../src/components/atoms/link-icon/link-icon';
import Paragraph from './../../../../src/components/atoms/paragraph/paragraph';

function GridTile({showImage=true, showHeading=true, showParagraph=true, ...props}) {
return (
 <div className={`grid-tile ${props.class}`}>
   <a href="#" className="grid-tile__link">
    div className="grid-tile__image">
      {showImage &&<<Image src="" />}
    </div>
    <div className="grid-tile__content">
     {showHeading && <Heading
        tag="3"
        class=""
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
      />}
      {showParagraph &&<Paragraph
        tag="p"
        text="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
        aliquip ex ea commodo consequat. "
      />}
      <LinkIcon text="Read More" />
    </div>
    </a>
   </div>
 );
}
export default GridTile;

我使用了默认道具，因此您不必每次都设置它们。

然后你可以像这样调用你的组件：

<GridTile showParagraph={false} />