Как залить цвет до Html?

Question

Как заполнить разные случайные цвета для всех различных тегов p в Reactjs

function App() {
  return (
    <div>
      <p>Hi</p>
      <p>Hello</p>
      <p>Cool</p>
      <p>Demo</p>
    </div>
  )
}

Answer 1

Вы можете попробовать этот подход на основе этой сути . Вы можете видеть это здесь: https://codesandbox.io/s/random-paragraph-colors-npdlp

function App() {
  const randomColor = () => {
    return "#" + Math.floor(Math.random() * 16777215).toString(16);
  };

  return (
    <div>
      <p style={{ backgroundColor: randomColor() }}>Hi</p>
      <p style={{ backgroundColor: randomColor() }}>Hello</p>
      <p style={{ backgroundColor: randomColor() }}>Cool</p>
      <p style={{ backgroundColor: randomColor() }}>Demo</p>
    </div>
  );
};

Подобный случай здесь:

Как изменить цвет каждого слова в содержимом реакции

Подробнее о стиле в реакции:

https://reactjs.org/docs/faq-styling.html

Answer 2

  import React, { Component } from 'react'

export default class Try extends Component {

    getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }
    render() {
        return (
            <div>
              <p style={{backgroundColor:this.getRandomColor()}}>Hi</p>
              <p style={{backgroundColor:this.getRandomColor()}}>Hello</p>
              <p style={{backgroundColor:this.getRandomColor()}}>Cool</p>
              <p style={{backgroundColor:this.getRandomColor()}}>Demo</p>
            </div>
          )
    }
}

Выход: