在分词（空格）处拆分句子，然后将随机选择的颜色应用为每个单词的样式。

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

看到它在这里工作 https://codesandbox.io/s/random-word-colors-lu5ew

您可以创建一个自定义组件以供重用，并将 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 >
  );
}

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

对于每个具有单独颜色的单词，它需要包含在一个独立的元素中，该元素可以被 CSS 单独定位。

<div>This is a message</div>

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

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

每个元素可以有一个。

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

不确定“随机更改”的确切含义，但我尝试在此处举出最基本的示例