如何更改反应内容中的每个单词颜色答案

【问题标题】：How to change each word color in react content如何更改反应内容中的每个单词颜色
【发布时间】：2019-11-14 19:53:20
【问题描述】：

我正在处理一项任务，我需要每 1 秒更改一次反应代码中句子或段落中每个单词的颜色。

这是我的代码：

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;

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

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

This 应该有一种颜色，is 应该有另一种颜色，同样所有的单词。我怎样才能做到这一点？

现在这些颜色应该每 1 秒再次变化一次。

【问题讨论】：

标签： reactjs

【解决方案1】：

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

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

【讨论】：

谢谢，但我想让文字的颜色每 1 秒随机改变一次，我该怎么做？
你能解释一下颜色是如何变化的吗？我可以看到 randomColor 方法从颜色数组中生成一个随机颜色，现在这个值在 1 秒后将如何变化，我不清楚那部分。 this.refresh.bind(this) 每秒都会被调用一次，但这如何改变单词的颜色？
我在状态下添加了一个刷新“计数器”，该状态由组件安装时启动的 setInterval 每秒更新一次。（每当组件的状态发生变化时，组件都会重新渲染）。因此，每次重新渲染发生时，都会为每个单词再次调用 randomColor()。 this.refresh.bind(this) 在 setInterval 范围内运行刷新函数。理想情况下，这种方法只能在较小的组件内完成，而不是在根级组件/应用程序上，但此代码仅用于示例。

【解决方案2】：

您可以创建自定义组件以供重用，并将 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，添加间隔颜色变化

【讨论】：

如何每1秒改变一次这个颜色？
@learner 一种简单的方法是重新渲染组件，我已经为此更新了代码。在我使用 React Hooks 的代码中

【解决方案3】：

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

<div>This is a message</div>

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

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

每个元素可以有一个。

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

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

【讨论】：