如何在 React 中多次渲染具有不同背景颜色和文本的 div 组件？

Question

我有一个 BoxOne div，黄色柔和，里面有一个 p 标签，上面写着“Box One”。它是一个顶部：178px 和左侧：426px 位置的 React 组件。而不是硬编码 BoxTwo 组件，我如何使用相同的 BoxOne 组件再次渲染，但颜色和文本不同，位置不同？我不打算条件渲染，只是同时出现。

比如说，橙色，带 'Box One Rendered Again' p 标签，顶部：178px，左侧：605px。

一排会有五个这样的方框，颜色和数值都不一样。分享以下代码：

一个。 Canvas 的 React 代码，其中导入了 BoxOne div：

import React from "react";
import "./Canvas.css";
import Workpanel from "../components/Workpanel";
import BoxOne from "../components/BoxOne";

class Canvas extends React.Component {
    render () {
        return(
            <div>
                <Workpanel />
                <div className="canvasContainer">
                    <div className="topicPlanner">
                        <p>Topic Planner</p>
                        <div className="topicVl"></div>
                    </div>
                    <BoxOne /> 
                </div>   
            </div>   
        )
    };
}

export default Canvas;

b。 BoxOne 的反应代码 div

import React from "react";
import styles from "./BoxOne.css";

function BoxOne() {
    return(
        <div id="boxOneContainer">
            <p className="boxOneText">Box One</p>
        </div>
    );
}

export default BoxOne;

c。这是我希望它看起来像的样子：

BoxOne Screenshot

Answer 1

您需要为BoxOne组件添加道具

import React from "react";
import styles from "./BoxOne.css";

function BoxOne({style={}, label=''}) {
    return(
        <div id="boxOneContainer" style={style}>
            <p className="boxOneText">{label}</p>
        </div>
    );
}

export default BoxOne;

那么在父组件中就可以这样使用了：

import React from "react";
import "./Canvas.css";
import Workpanel from "../components/Workpanel";
import BoxOne from "../components/BoxOne";

class Canvas extends React.Component {
    render () {
        return(
            <div>
                <Workpanel />
                <div className="canvasContainer">
                    <div className="topicPlanner">
                        <p>Topic Planner</p>
                        <div className="topicVl"></div>
                    </div>
                    <BoxOne text="Box One" /> 
                    <BoxOne text="Box One Rendered Again" style={{color: '#0F0', top: '178px', left: '605px'}} /> 
                </div>   
            </div>   
        )
    };
}

export default Canvas;

尽管此时，您可能想要将组件的名称从 BoxOne 更改为 Box...

因为你有五个盒子，使用这样的数组会更干净：


const boxes = [
  { label: 'box1', style: {} },
  { label: 'box2', style: {left: '100px'} },
  { label: 'box3', style: {left: '200px'} },
  { label: 'box4', style: {left: '300px'} },
  { label: 'box5', style: {left: '400px'} },
];

class Canvas extends React.Component {
    render () {
        return(
            <div>
                <Workpanel />
                <div className="canvasContainer">
                    <div className="topicPlanner">
                        <p>Topic Planner</p>
                        <div className="topicVl"></div>
                    </div>
                   {boxes.map(box => (
                     <BoxOne label={box.label} style={box.style} key={box.label} /> 
                    )}
                </div>   
            </div>   
        )
    };
}

export default Canvas;

更多道具信息请阅读https://reactjs.org/docs/components-and-props.html

如何在 React 中多次渲染具有不同背景颜色和文本的 div 组件？

How to render a div component multiple times with different background color and text in React?

javascript

reactjs

react-component