在 React 中从数组中渲染特定元素

Question

我的目标是有一个框，可以在数组中按顺序呈现颜色的单词。

我正在为渲染数组的每个元素的概念而苦苦挣扎。我假设您需要挑选每个元素，将其存储在一个变量中，然后渲染该变量，但每次尝试时我都会遇到死胡同。

您将在下面的代码中看到我注释掉的尝试。我也尝试过forEach，但在尝试使用forEach 时，React 给了我一个错误。

此外，有人告诉我尽可能避免使用.map 和for loop。

import React from 'react'

class ColorSwitch extends React.Component {
    constructor(props) {
        super(props)
            this.state = {
                colors: ["white", "orange", "purple", "black", "green"]
            }
    }

    nextColor = () => {
        let newColor = this.state.colors

        // let setColor = newColor[0] += 1 (DIDNT WORK)

        this.setState({colors: setColor})
    }

    render() {
        let { colors } = this.state
        return(
            <div className="box" onClick={this.nextColor}>
            <p>{this.setColor}</p>
            </div>
        )
    }
}

export default ColorSwitch

提前感谢您的帮助。

Answer 1

从 props 中获取颜色（如果它是静态的，则使用 const），并将 currentColorIndex 存储在 state 中。

当调用nextColor 时，将currentColorIndex 加1（我使用 %colors.length 进行下一个循环）。要渲染抓取currentColorIndex处的颜色：

const colors = ["white", "orange", "purple", "black", "green"]

class ColorSwitch extends React.Component {
    state = {
      currentColorIndex: 0
    }

    nextColor = () =>
      this.setState(({ currentColorIndex }) => ({
        currentColorIndex: (currentColorIndex + 1) % this.props.colors.length
      }))

    render() {
        const { currentColorIndex } = this.state
        const { colors } = this.props
        
        const color = colors[currentColorIndex];
        
        return(
            <div className="box" 
            onClick={this.nextColor} 
            style={{ background: color }}>
              <p>{color}</p>
            </div>
        )
    }
}

ReactDOM.render(
  <ColorSwitch colors={colors} />,
  demo
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="demo"></div>

Answer 2

我不知道是谁让你远离.map，因为你应该这样做。

import React from 'react'

class ColorSwitch extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
           colors: ["white", "orange", "purple", "black", "green"]
        }
    }

    render() {
        let { colors } = this.state
        return(
            <div>
              {colors.map(color => 
                 <div className="box">
                   <p>{color}</p>
                 </div>
              )}
            </div>
        )
    }
}

export default ColorSwitch