最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - React - array of colors will change color <p> - Stack Overflow

programmeradmin0浏览0评论

I'm a newbie in React and I have an app that should render different <p> with different colors from an array.

as for my latest code

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

I'm a newbie in React and I have an app that should render different <p> with different colors from an array.

as for my latest code

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

and the output should be like this:

Thanks in advance.

Share Improve this question asked Jan 6, 2017 at 10:06 kcNekokcNeko 6091 gold badge9 silver badges23 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 6

You can use the iterator of the map to set the style of the p element accordingly.

In 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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='View'></div>

In ES5 (with createClass, which is not remended):

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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='View'></div>

发布评论

评论列表(0)

  1. 暂无评论