0
237
ViewsReaccionar: la matriz de colores cambiará de color <p>
Soy un novato en React y tengo una aplicación que debería representar diferentes <p> con diferentes colores de una matriz.
en cuanto a mi último código
const data1 = [ {name: 'one'}, {name: 'two'}, {name: 'three'}, {name: 'four'} ]; const colors = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']; export default React.createClass({ render() { return ( <div> {data1.map(function(a) { return ( <p>{a.name}</p> ) })} </div> ) } }) y la salida debería ser así:
Gracias por adelantado.
·
Santiago Trujillo
1 answers
Answer question0
Puede usar el iterador del mapa para establecer el style del elemento p en consecuencia.
En ES6:
const data1 = [ { name: 'one' }, { name: 'two' }, { name: 'three' }, { name: 'four' } ]; const colors = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']; class Example extends React.Component { render() { return ( <div> {data1.map((a, i) => <p style={{ color: colors[i] }} key={i}>{a.name}</p>)} </div> ); } } ReactDOM.render(<Example />, document.getElementById('View')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='View'></div> En ES5 (con createClass , que no se recomienda):
const data1 = [ { name: 'one' }, { name: 'two' }, { name: 'three' }, { name: 'four' } ]; const colors = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']; const Example = React.createClass({ render() { return ( <div> {data1.map(function(a, i) { return ( <p style={{ color: colors[i] }} key={i}>{a.name}</p> ); })} </div> ); } }); ReactDOM.render(<Example />, document.getElementById('View')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='View'></div>
·
Santiago Trujillo
Report
Answer question