你怎么能跳过下面这段代码中的一个字符串？

Question

我正在尝试将我的消息分别设为红色和白色。我已经能够成功地使消息变成红色和白色，但问题是它考虑了字符串中的空格。我试图做到只有字母分别是红色和白色，而不是空格。帮助将不胜感激，谢谢！！

import React, { useState } from 'react';
import Navbar from './Navbar';
import { Box, Grid, Typography } from '@material-ui/core';
import { Random } from 'react-animated-text';
import Styles from './Styles';
import AboutSkills from './AboutSkills';

const About = () => {
const classes = Styles()

const [color /*setColor*/] = useState({
    message: 'My name is Junaid Razaq and I am a Web Developer',
    colors: [
        'red',
        'white'
        // 'white',
        // 'red'
    ]
})

const colorText = ( message, colorr ) => {
    let mesge = []

    for (let i = 0; i < message.length; i++){
    colorr[i] = colorr[i % 2]
    mesge[i] = (
        <Typography variant='h5' style={{ color: colorr[i], display:'inline-block'}}>
            <Random 
                text={message[i]} 
                effect='jump' 
                effectChange={.1}
                effectDuration={1}
            />
        </Typography>
       )}
    return mesge
 }

return (
    <>
        <Navbar/>
        <Box className={classes.aboutBox}>   
                {colorText(color.message, color.colors)}
        </Box>
    </>
)
}

export default About

Answer 1

一个简单的方法（使用现有代码实现）是使用不同的变量来跟踪颜色。

const colorText = ( message, colorr ) => {
let mesge = []
let colorIndex = 0
for (let i = 0; i < message.length; i++){
colorr[i] = colorr[colorIndex % 2]
if (message[i] != ' ') colorIndex++ //dont change color if space
mesge[i] = (
    <Typography variant='h5' style={{ color: colorr[i], display:'inline-block'}}>
        <Random 
            text={message[i]} 
            effect='jump' 
            effectChange={.1}
            effectDuration={1}
        />
    </Typography>
   )}
return mesge

}

我不知道这是否会为空格添加颜色（我猜不会），但如果是，那么如果当前字符是 ' '，您可以跳过排版部分。

你怎么能跳过下面这段代码中的一个字符串？

How can you skip a string in this code below?

javascript

reactjs

string

letter-spacing