javascript - ReactJS - 如何为每个字符创建一个具有多种颜色的字符串

Question

我是 ReactJs 和 Javascript 的新手，我正在用 create-react-app 编写一个网站. 我想让我的主页标题以不同的色 block 显示，并先验地确定切入点。例如。如果切割点设置为 9 并且标题的长度由 String.length 返回是63，每个色 block 每7个字符显示不同的颜色。

我怀疑我遇到的问题与 JSX 语法有关，因为使用 vanilla Javascript 的相同方法不会发生该问题。非常感谢对这一点的任何解释。

方法

我创建了一个名为 ColorText 的新功能组件它处理字符串的着色。此组件在 render() 中调用我的主类的方法 App , 它负责返回父类传递的原始字符串的彩色版本。

import React from 'react';
import styled from 'styled-components';
import { GlobalStyle } from './styles/global_style.js';
import { ColorText } from './components/ColorText.js';
import morning_gif from './assets/morning3D.gif';

const TitleStyle = styled.h1`
  font-family: BethEllen;
  font-size: 30pt;
  line-height: 60px;
  display: flex;
  text-align: center;
`;

const MorningGif = styled.img`
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
`;

export default class App extends React.Component {

  state = {
    message: "This is some example text, and it will be colorful as a rainbow!",
    colorBreakPoint: 9,
    colorScheme: {
      pink: 'rgb(255,180,172)',
      green: 'rgb(103,145,134)',
      blue: 'rgb(38,78,112)'
    }
  }

  render(){
    return (
      <div>

        <GlobalStyle />

          <div>
            <h1>
              <TitleStyle>
                <ColorText content={this.state} />
              </TitleStyle>
            </h1>
          </div>

        <MorningGif src={morning_gif} alt="Loading the coffee..." />

      </div>
    );
  }
}

下面是ColorText组件。

export const ColorText = ({ content: { message, colorBreakPoint, colorScheme } }) => {

  const colorSpan = (message.length % colorBreakPoint) === 0 ?
                    message.length / colorBreakPoint
                  : message.length / 5;

  const colorKeys = Object.keys(colorScheme);

  let currentColor = 0;
  let colorMessage = [];

  for (let i = 0; i < message.length; i++){

    if ((i % colorSpan) === 0){
      currentColor++;
    }

    if (currentColor === 3){
      currentColor = 0;
      }

    colorMessage[i] = ("<span style={{ color: '"
      + colorScheme[colorKeys[currentColor]]
      + "' }}>" + message[i]
      + "</span>");
  }

  return colorMessage.join("");
}

预期输出是一个字符串，其字符由 <span></span> 括起来标签，带有内联属性 style指定每个封闭字符的颜色(例如 <span style={{ color: 'rgba(255,180,17)' }}>H</span><span style={{ color: 'rgba(103,145,134)' }}>I</span> 等)。

问题

但是，这是当前的输出: multicolors-string-output.png

字符串本身被呈现为字符串，HTML 标记的内容不会被评估为 JSX 对象。我试着附上 ColorText被 App 调用时大括号中的组件和return {colorMessage.join("")}一样在ColorText ，但没有任何变化。 我搜索了几个选项并尝试了不同的方法，但我想问题是我不理解 JSX 语法——甚至对 Javascript 来说都是新的。关于这一点的任何解释都非常有帮助!

注意:这是 ColorText 组件及其输出的 Javascript 复制品 https://jsfiddle.net/qz4Lxdak/ .

Answer 1

您需要返回一个包含 JSX 元素的数组。

let colorMessage = [];

  for (let i = 0; i < message.length; i++){

    if ((i % colorSpan) === 0){
      currentColor++;
    }

    if (currentColor === 3){
      currentColor = 0;
    }

    colorMessage[i] = (
        <span style={{ color: colorScheme[colorKeys[currentColor]].toString() }}>
            {message[i]}
        </span>
    );
  }

return colorMessage;