Как получить массив в компоненте класса в другой файл в реакции?

Question

Реальная ситуация заключается в том, что я хочу получить значение радиокнопки в одном файле и позволить им показывать в другом файле, поэтому я могу сообщить пользователю, что они выбирали раньше.

Используемый код выбора переключателя:

class Usurvey extends Component {
constructor(props){
    super(props);


    this.state = {
      uid: uuid.v1(),
      studentName: '',
      answers: {
        answer1: '',
        answer2: '',
        answer3: ''
      },
      isSubmitted: false
    };
    this.nameSubmit = this.nameSubmit.bind(this);
    this.answerSelected = this.answerSelected.bind(this);
    this.questionSubmit = this.questionSubmit.bind(this);
  }
render(){
<form onSubmit={this.questionSubmit}>
          <div className="card">
          <div className="video">
          <ReactPlayer  url={Array[0].url} />
          </div>       
              <label>Do you think the video is fake or real? </label> <br />
              <input type="radio" name="answer1" value="real" onChange={this.answerSelected} />Real
              <input type="radio" name="answer1" value="fake" onChange={this.answerSelected} />Fake
            </div>

            <div className="card">
            <div className="video">
          <ReactPlayer  url={Array[0].url} />
          </div>     
              <label>Do you think the video is fake or real? </label> <br />
              <input type="radio" name="answer2" value="real" onChange={this.answerSelected} />Real
              <input type="radio" name="answer2" value="fake" onChange={this.answerSelected} />Fake
            </div>
return(
      <div>
        {studentName}
        {questions}
      </div>
    );
  }
}

export default Usurvey;

Файл кода, который я хочу ввести значение переключателя.

'use strict'
import React, { useState } from 'react';
import ReactPlayer from 'react-player';
import Array from '../Array';
import Usurvey from '../Usurvey2';


export default () => {

    return (
      <div>
          <div className="video">
          <ReactPlayer  url={Array[0].url} playing/>
          <div>
              <p>Your guess: </p>
               <p>{Usurvey.props.Answer[0]}</p> 
               <p>Right Answer:</p>
               <p>{Array[0].name}</p>
          </div> 

          </div>   

      </div>
    )
  }

Теперь я попытался импортируйте Usurvey из последнего файла и используйте prop для получения ответа, но он не работает

Answer 1

Реквизиты не являются статичными c или жестко закодированными данными, к которым можно получить доступ, просто импортировав файл. Более того, это не способ передачи реквизитов от родительского компонента к дочернему компоненту.

Либо вам нужно поднять состояние в Usurvey компоненте до его родительского компонента, откуда вы можете передать его в компонент, где вы хотите значение переключателя.

Или вы можете передать onSubmit из обработчика в качестве реквизита компоненту Usurvey из его родительского компонента. Родительский компонент будет хранить данные формы и передавать их требуемому компоненту.

Или, если оба компонента находятся на разных уровнях иерархии, вы также можете использовать избыточность вместо передачи их каждому компоненту в пути. ,

Подробнее о компонентах и ​​деталях можно узнать здесь здесь .

Редактировать

class ParentComponent extends Component {

  state = {
     submittedQuestion: {} // depending on your logic you can store all the 
                              questions or just one.
  }

  onQuestionSubmit = () => {
     // store data in state.
  }

  render (){
   const {submittedQuestion} = this.state;
   return (

     <Usurvey onQuestionSubmit={this.onQuestionSubmit} />
     <QuestionSubmittedView submittedQuestion={submittedQuestion}/>
   );
  }
}