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

【问题标题】：How would I select a specific component in React我如何在 React 中选择特定组件
【发布时间】：2019-06-24 03:59:50
【问题描述】：

我有一个包含 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>
  )
}

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

使用React+Redux

【问题讨论】：

access 是什么意思？你想做什么？
想要定位它并改变它的属性/样式
你的意思是改变发送给它的道具吗？
所以基本上我正在创建一个测验，我的代码创建了三个按钮，其中一个是“正确”按钮，我正在寻找一种与其他两个不同的方式来设置它的样式

标签： javascript reactjs redux components

【解决方案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}
    />
)}

无需更改您的数组。

【讨论】：