[英]React - How can I pickup component which one I want in to another module
See the below code.请参阅下面的代码。 It is a Tile component with image, heading, Paragraph, and a button.
它是一个包含图像、标题、段落和按钮的 Tile 组件。 My requirement is I want to use this code for creating multiple type tiles (modules).
我的要求是我想使用此代码创建多种类型的图块(模块)。 Eg without image, Or without Paragraph and button.
例如没有图像,或者没有段落和按钮。
for Eg how can I create another tile (module) without Paragraph and button.例如,如何在没有段落和按钮的情况下创建另一个图块(模块)。 (not create same below code without paragraph and button)
(在没有段落和按钮的情况下,不能在下面创建相同的代码)
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;
you could decide based on your props.你可以根据你的道具来决定。
const GridTile(props) {
...
{props.showImage && <Image...}
{props.showHeading && <Heading...}
then, you call the GridTile in the following way:然后,您通过以下方式调用 GridTile:
<GridTile showImage={true} showHeading={true} />
It will depend on your use case if you want to have defaultProps, all in false and then true in special case.如果您想要 defaultProps,这将取决于您的用例,全部为 false,然后在特殊情况下为 true。 But basically, base what you show depending on the props you pass or in the default props declared in the component.
但基本上,您显示的内容取决于您传递的道具或组件中声明的默认道具。 (or better, default values.)
(或更好的默认值。)
One way to do it is via using props, so the parent component decides what to see.一种方法是通过使用道具,所以父组件决定看什么。
Your code will look something like this:您的代码将如下所示:
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;
I have used default props, so you don't have to set all of them every time.我使用了默认道具,因此您不必每次都设置它们。
Then you can call your component like this:然后你可以像这样调用你的组件:
<GridTile showParagraph={false} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.