javascript - 如何在 React 中向 jsx 元素数组的最后一个元素添加道具？

Question

• 我想让isActive数组中最后一个元素的道具为真，其余为假
• 最初我将所有设置为true但我想根据数组的长度动态修改它
• 也就是说，如果我只想isActive为第一个组件设置 1 个元素Number

例子

• 假设我在数字数组中有 5 个元素，那么我想要拥有number[3]trueisActive 并且休息为 false

请帮助解决这个数组操作:((

import React, { Component } from 'react'

class Numbers extends Component {
    render() {
        const correctGuesses = this.props.correctGuesses
        let number = [<Number guess={'1-100'} key={0 + Math.random} isActive={true}/>]
        for(let i=0 ; i < correctGuesses ; i++) {
            number.push(<Number guess={`1-${i+2}00`} key={i} isActive={true}/>)
        }

        return (
            <React.Fragment>
                {number}
            </React.Fragment>
        )
    }
}

标签： javascriptreactjs

Answer 1

如果您希望最后一个元素具有 isActive 道具，您可以使用：

Import React, { Component } from 'react'

class Numbers extends Component {
    render() {
        const correctGuesses = this.props.correctGuesses
        let number
        if(correctGuesses === 0) {
            number = [<Number guess={`1-100`} key={Math.random} isActive={true}/>]
        } else if (correctGuesses > 0) {
            number = [<Number guess={`1-100`} key={Math.random} isActive={false}/>]
        }

        for(let i=0 ; i < correctGuesses ; i++) {
            if(i === correctGuesses-1)
                number.push(<Number guess={`1-${i+2}00`} key={i} isActive={true}/>)
            else
                number.push(<Number guess={`1-${i+2}00`} key={i} isActive={false}/>)
        }


        return (
            <React.Fragment>
                {number}
            </React.Fragment>
        )
    }
}