Soy nuevo en el mundo de React y después de ver tutoriales e hice algunos códigos, quería saber si puedo agregar atributos como valor y color a un div. Quiero decir, ¿Cómo puedo devolver Hello World con color? El siguiente es un ejemplo:
<div style="color: red;">Hello World!</div>Intenté con la función de constructor, pero no puedo representar el color y el valor de "¡Hola mundo!
En un archivo JSX, usaría <div style={{color: 'red'}}>Hello World!</div>
Yo usaría una clase para esto.
function Example() { return ( <div className="red"> Hello world! </div> ); } ReactDOM.render( <Example />, document.getElementById('react') ); .red { color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div> O, si está pasando accesorios a otro componente, aún puede usar este método. Simplemente pase el color como accesorio y luego use className={color} .
function Example() { return <Hello color="red" /> } function Hello({ color }) { return ( <div className={color}> Hello world! </div> ); } ReactDOM.render( <Example />, document.getElementById('react') ); .red { color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>