Как бы я выбрал конкретный компонент в React - PullRequest
Новая
       11

Как бы я выбрал конкретный компонент в React

0 голосов
/ 30 января 2019

У меня есть ситуация, когда у меня есть массив с 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

1 Ответ

0 голосов
/ 30 января 2019

У вас есть 2 варианта.Помещение ваших ответов в разные объекты и установка одного значения на true для правильного ответа: 

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

Теперь, когда мы настроили структуру данных, функция sort по умолчанию больше не будет работать, поэтому мы получимчтобы взять правильные значения для сравнения в ваших объектах: 

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

Теперь вы знаете, какой объект является правильным в вашем map, и можете отправить эту информацию обратно в реквизит компонента, чтобы оформить его:

{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.

EDIT

Хорошо, теперь, когда я думаю об этом,может быть, есть более простой вариант: 

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

Никаких изменений в вашем массиве не требуется.

...