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

Question

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

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

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

你可以根据你的 Prop 来决定。

const GridTile(props) {

...

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

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

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

如果您想要 defaultProps，这将取决于您的用例，全部为 false，然后在特殊情况下为 true。但基本上，根据您传递的 Prop 或组件中声明的默认 Prop 来显示您所显示的内容。 (或者更好的是默认值。)