Reactjs 如何更改内容中每个单词的颜色

我正在做一项任务，我需要每1秒更改react代码中句子或段落中每个单词的颜色

这是我的密码：

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    constructor(props) {
    super(props);
    this.state = {
      colors: ["red", "yellow", "blue", "green", "purple", "pink"]
    };

    this.changeBg = this.changeBg.bind(this);
  }

componentDidMount() {
    setInterval(this.changeBg, 1000);
 }

  changeBg() {
    const { colors } = this.state;
    const color = colors[Math.floor(Math.random() * colors.length)];
    document.body.style.backgroundColor = color;
  }

  render() {
    return (
      <div>
        This is a sample message in react template
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
颜色：[“红”、“黄”、“蓝”、“绿”、“紫”、“粉红”]
};
this.changeBg=this.changeBg.bind（this）；
}
componentDidMount（）{
setInterval（this.changeBg，1000）；
}
changeBg（）{
const{colors}=this.state；
const color=colors[Math.floor（Math.random（）*colors.length）]；
document.body.style.backgroundColor=颜色；
}
render（）{
返回(
这是react模板中的示例消息
);
}
}
导出默认应用程序；

这可以很好地改变内容的背景。但我的任务是每1秒随机改变每个单词的颜色

文本示例这是react模板中的示例消息

这个

应该有一种颜色，

是

应该有另一种颜色，同样所有的单词都应该有另一种颜色。我该怎么做

---

现在，这些颜色应该每1秒再次更改一次。

要使每个单词都有一个单独的颜色，它需要包含在一个能够被CSS单独定位的离散元素中

<div>This is a message</div>

这是一条消息

只能有一个CSS规则定义文本颜色

<span>This</span><span>is</span><span>better</span>

这样更好

每个元素可以有一个

我建议将文本存储在state中，像任何其他字符串一样将其拆分为单词，并在生成的数组上迭代以呈现单独的元素，您可以根据需要设置样式

---

我不确定你所说的“随机改变”到底是什么意思，但我试着做了一个最基本的例子，我可以

为了每个单词都有一个单独的颜色，它需要包含在一个离散的元素中，这个元素能够被CSS单独定位

<div>This is a message</div>

这是一条消息

只能有一个CSS规则定义文本颜色

<span>This</span><span>is</span><span>better</span>

这样更好

每个元素可以有一个

我建议将文本存储在state中，像任何其他字符串一样将其拆分为单词，并在生成的数组上迭代以呈现单独的元素，您可以根据需要设置样式

---

我不确定“随机更改”到底是什么意思，但我试着做了一个最基本的示例，我可以创建一个自定义组件以供重用，并根据您的样式需要替换html元素

用例：

<ColorPara>Hello world</ColorPara>

你好，世界

下面是一个例子：

const getRandomColor = () => {
  const colors = ['red', 'orange', 'green', 'blue']
  return colors[Math.floor(Math.random() * colors.length)];
}

const ColorPara = (props) => {

  return (
    <p>
      {props.children.split(' ').map(text => {
        return (
          <p style={{ color: getRandomColor(), display: 'inline', }}>
            {text} &nbsp;
          </p>
        )
      })}
    </p>
  )
}

function App() {
  //For changing on interval
  //-------------------------
  const [count, setCount ] = useState(0)

  setInterval(() => {
    let newCount = count + 1
    setCount(newCount)
  }, 2000);
  //--------------------------


  return (
    <div className="App">
      <ColorPara>This is something</ColorPara>
    </div >
  );
}

const getRandomColor=（）=>{
常量颜色=[“红色”、“橙色”、“绿色”、“蓝色”]
返回颜色[Math.floor（Math.random（）*colors.length）]；
}
const ColorPara=（道具）=>{
返回(

{props.children.split（''）.map（text=>{
返回(

{text}

)
})}

)
}
函数App（）{
//用于按间隔进行更改
//-------------------------
const[count，setCount]=useState（0）
设置间隔（（）=>{
让newCount=count+1
设置计数（新计数）
}, 2000);
//--------------------------
返回(
这是一件大事
);
}

---

编辑：添加图像、在代码块上方添加描述、添加gif、添加间隔颜色更改

您可以创建自定义组件以供重用，并根据您的样式需要替换html元素

用例：

<ColorPara>Hello world</ColorPara>

你好，世界

下面是一个例子：

const getRandomColor = () => {
  const colors = ['red', 'orange', 'green', 'blue']
  return colors[Math.floor(Math.random() * colors.length)];
}

const ColorPara = (props) => {

  return (
    <p>
      {props.children.split(' ').map(text => {
        return (
          <p style={{ color: getRandomColor(), display: 'inline', }}>
            {text} &nbsp;
          </p>
        )
      })}
    </p>
  )
}

function App() {
  //For changing on interval
  //-------------------------
  const [count, setCount ] = useState(0)

  setInterval(() => {
    let newCount = count + 1
    setCount(newCount)
  }, 2000);
  //--------------------------


  return (
    <div className="App">
      <ColorPara>This is something</ColorPara>
    </div >
  );
}

const getRandomColor=（）=>{
常量颜色=[“红色”、“橙色”、“绿色”、“蓝色”]
返回颜色[Math.floor（Math.random（）*colors.length）]；
}
const ColorPara=（道具）=>{
返回(

{props.children.split（''）.map（text=>{
返回(

{text}

)
})}

)
}
函数App（）{
//用于按间隔进行更改
//-------------------------
const[count，setCount]=useState（0）
设置间隔（（）=>{
让newCount=count+1
设置计数（新计数）
}, 2000);
//--------------------------
返回(
这是一件大事
);
}

---

编辑：添加图像，在代码块上方添加描述，添加gif，添加间隔颜色更改

在分词符（空格）上拆分句子，然后将随机选择的颜色作为每个单词的样式

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      colors: ["red", "yellow", "blue", "green", "purple", "pink"],
      sampleMessage: "This is a sample message in react template",
      refresh: 0
    };
  }

  refresh() {
    let { refresh } = this.state;
    refresh = refresh + 1;
    this.setState({ refresh });
  }

  componentDidMount() {
    setInterval(this.refresh.bind(this), 1000);
  }

  render() {
    const { sampleMessage, colors, refreshRate } = this.state;

    const randomColor = () => {
      return colors[(Math.random() * colors.length) >> 0];
    };

    return (
      <div>
        {sampleMessage.split(" ").map(word => {
          return <span style={{ color: randomColor() }}>{`${word} `}</span>;
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React，{Component}来自“React”；
从“react dom”导入react dom；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
颜色：[“红”、“黄”、“蓝”、“绿”、“紫”、“粉红”]，
sampleMessage：“这是react模板中的示例消息”，
刷新：0
};
}
刷新（）{
让{refresh}=this.state；
刷新=刷新+1；
this.setState（{refresh}）；
}
componentDidMount（）{
setInterval（this.refresh.bind（this），1000）；
}
render（）{
const{sampleMessage，colors，refreshRate}=this.state；
常量随机颜色=（）=>{
返回颜色[（Math.random（）*colors.length）>>0]；
};
返回(
{sampleMessage.split（“”）.map（word=>{
返回{${word}}；
})}
);
}
}
const rootElement=document.getElementById（“根”）；
render（
在分词（空格）处拆分句子，然后将随机选择的颜色作为每个单词的样式

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      colors: ["red", "yellow", "blue", "green", "purple", "pink"],
      sampleMessage: "This is a sample message in react template",
      refresh: 0
    };
  }

  refresh() {
    let { refresh } = this.state;
    refresh = refresh + 1;
    this.setState({ refresh });
  }

  componentDidMount() {
    setInterval(this.refresh.bind(this), 1000);
  }

  render() {
    const { sampleMessage, colors, refreshRate } = this.state;

    const randomColor = () => {
      return colors[(Math.random() * colors.length) >> 0];
    };

    return (
      <div>
        {sampleMessage.split(" ").map(word => {
          return <span style={{ color: randomColor() }}>{`${word} `}</span>;
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React，{Component}来自“React”；
从“react dom”导入react dom；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
颜色：[“红”、“黄”、“蓝”、“绿”、“紫”、“粉红”]，
sampleMessage：“这是react模板中的示例消息”，
刷新：0
};
}
刷新（）{
让{refresh}=this.state；
刷新=