Question

我遇到一个带有3个值的数组的情况：

const dogArray = [randomDog(), randomDog(), correctName].sort()

我正在为该数组中的每个元素创建一个组件：

const renderButtons = () => {
  return (
    <div>
      {dogArray.map((dog, index) => 
        <DogNameComponent 
          key={index} 
          submitAnswer={() => this.submitAnswer(correctName, dog)} 
          name={dog}
        />
      )}
    </div>
  )
}

我如何访问由DogNameComponent中的correctName元素创建的dogArray？

使用React + Redux

Answer 1

您有2个选项。将答案放在不同的对象中，并将一个值设置为true以获得正确的答案：

const dogArray = [{ answer: randomDog() }, { answer: randomDog() }, { answer: correctName, correct: true}].sort()

现在我们已经调整了数据结构，默认的sort函数将不再起作用，因此我们必须采用正确的值在您的对象中进行比较：

sort((a, b) => a.answer > b.answer)

您现在知道map中哪个对象是正确的对象，可以将此信息发送回组件的props以对其进行样式设置：

{dogArray.map((dog, index) =>
        <DogNameComponent
            key={index}
            submitAnswer={() => this.submitAnswer(correctName, dog.answer)}
            name={dog.answer}
            isCorrect={dog.correct}
        />
    )
}

或在解构之前将其设置在数组中：

const dogArray = [[randomDog()], [randomDog()], [correctName, true]].sort()

排序：sort(([a], [b]) => a > b)

映射功能：

{dogArray.map(([answer, correct], index) =>
        <DogNameComponent
            key={index}
            submitAnswer={() => this.submitAnswer(correctName, answer)}
            name={answer}
            isCorrect={correct}
        />
    )
}

子组件现在将知道它是否是正确的答案，可以在this.props.correct中访问此值。

编辑

好吧，现在我想到了，也许有一个更简单的选择：

{dogArray.map((dog, index) => 
    <DogNameComponent 
      key={index} 
      submitAnswer={() => this.submitAnswer(correctName, dog)} 
      name={dog}
      correct={dog === correctName}
    />
)}

无需更改阵列。

我如何在React中选择特定组件

1 个答案: