使用布局显示 React 重复组件

Question

我在使用 React 时遇到问题。我已经阅读了文档，但我仍然对需要采取哪些步骤感到困惑。

我已经创建了 PrimaryLayout 并使用道具调用了子项。在索引文件（页面）中调用了 PrimaryLayout 并嵌入了卡片组件。

但是，在输出中我看到了重复的组件。

感谢您的帮助。

请查找以下代码

PrimaryLayout.js

import React from 'react'
import Header from "../components/Header"
import FooterMessage from "../components/FooterMessage"

const PrimaryLayout = (props) => (
    <div>
    <Header/>
        <div className="container">
        <div className="row justify-content-md-center">
            <div className="col-xs-6">
                {props.children}
            </div>
        </div>
        </div>
    <FooterMessage/>
</div>
);
export default PrimaryLayout;

卡片组件

import React from 'react'
import {Card, Button} from 'react-bootstrap'

const CardBox = (props) => (
    <div className ="p-3">
    <Card>
        <Card.Img variant="top" src="https://loremflickr.com/640/360" />
        <Card.Body>
            <Card.Title>{props.titleFirst}</Card.Title>
            <Card.Text>{props.description}</Card.Text>
            <Button variant="primary">Go somewhere</Button>
        </Card.Body>
    </Card>
    <Card>
        <Card.Img variant="top" src="https://loremflickr.com/640/360" />
        <Card.Body>
            <Card.Title>{props.titleSecond}</Card.Title>
            <Card.Text>{props.description}</Card.Text>
            <Button variant="primary">Go somewhere</Button>
        </Card.Body>
    </Card>
</div>
);

export default CardBox;

Index.js

import React from "react"
import CardBox from "../components/CardBox"
import PrimaryLayout from "../layouts/PrimaryLayout"
export default () => (
          <PrimaryLayout>
            <CardBox 
              titleFirst="This is my first post" 
              description = "We are writing something to be displayed in description"
            />
            <CardBox 
              titleSecond="This is my first post" 
              description = "We are writing something to be displayed in description"
            />
        </PrimaryLayout>  
)

Answer 1

如果我没有理解错的话，这与CardBox组件有关。现在，您在 CardBox 组件中创建了 2 个 Card 组件。这意味着对于每个 CardBox 个组件，您将获得 2 个 Card 个组件。第一个 Card 带有 titleFirst 和描述，第二个 Card 带有 titleSecond 和描述。如果您更改 BoxCard 组件以仅显示 Card 组件，如下所示：

const CardBox = (props) => (
    <div className ="p-3">
    <Card>
        <Card.Img variant="top" src="https://loremflickr.com/640/360" />
        <Card.Body>
            <Card.Title>{props.title}</Card.Title>
            <Card.Text>{props.description}</Card.Text>
            <Button variant="primary">Go somewhere</Button>
        </Card.Body>
    </Card>
</div>
);

让 index.js 像这样使用它：

export default () => (
  <PrimaryLayout>
    <CardBox 
      title="This is my first post" 
      description = "We are writing something to be displayed in description"
    />
    <CardBox 
      title="This is my first post - second CardBox" 
      description = "We are writing something to be displayed in description"
    />
  </PrimaryLayout>  
);

希望这就是您要找的！

使用布局显示 React 重复组件

React duplicate component getting displayed using layout

reactjs

react-props