Question

我在这里的目标是要有一个框，用于在数组中按顺序呈现颜色的单词。

我正在为渲染数组的每个元素而苦苦挣扎。我假设您需要挑选每个元素，将其存储在变量中，然后呈现该变量，但是每次尝试时，我都陷入僵局。

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

另外，我被告知避免使用.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

从道具中获取颜色（如果是静态的，则使用const），并将currentColorIndex存储在状态内。

调用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

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

2 个答案: