javascript - React - 颜色数组将改变颜色

Question

我是 React 的新手，我有一个应该呈现不同的应用 <p>具有来自数组的不同颜色。

至于我最新的代码

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>
        )
  }
})

输出应该是这样的:

提前致谢。

Answer 1

您可以使用 map 的迭代器相应地设置p 元素的样式。

在 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>

在 ES5 中(不推荐使用 createClass):

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>