Tengo el div de BoxOne con color amarillo pastel con una etiqueta en su interior que dice "Box One". Es un componente React con la parte superior: 178 px y la izquierda: 426 px de posición. En lugar de codificar un componente BoxTwo, ¿cómo puedo usar el mismo componente BoxOne para renderizar nuevamente pero con un color y texto diferentes, en una posición diferente? No estoy planeando una representación condicional, solo que todos aparezcan al mismo tiempo.
Digamos, naranja, con la etiqueta p 'Box One Rendered Again' y la parte superior: 178px y la izquierda: 605px.
Habrá cinco casillas de este tipo seguidas, todas con colores y valores diferentes. Compartiendo los códigos a continuación:
una. Código de reacción para Canvas donde se importa 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. Código de reacción para 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. Así es como quiero que se vea como:
Necesita agregar accesorios al componente 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;Luego puede usarlo en el componente principal de esta manera:
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; Aunque en este punto, probablemente desee cambiar el nombre del componente de BoxOne a Box ...
Como tiene cinco cajas, será más limpio usar una matriz como esta:
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;Para obtener más información sobre accesorios, lea https://reactjs.org/docs/components-and-props.html