如何将 Json 对象数组从子类组件传递到 React 中的父类组件？答案

【问题标题】：How to pass a Json array of objects from a child class component to parent class component in React?如何将 Json 对象数组从子类组件传递到 React 中的父类组件？
【发布时间】：2020-07-10 16:21:23
【问题描述】：

类组件的内部琐事我有一个currentQuestion 状态变量，它充当索引。我创建了另一个类组件 Questions，它将从 JSON 文件中读取，我想将它传递给 Trivia，如下所示：

...
 questions = <Questions index="{currentQuestion}"/>

   return (
     <div>
       <div>{finished ? "You are done" : questions.question }</div>
...

并且每次在上面设置状态currentQuestion 时更新每个问题。问题是对象数组或索引对于我尝试的所有内容都未定义。如何将此数组传递给父组件，以便它可以接收 currentQuestion 状态并相应地更新正确的问题？

我试过的代码：

import React from "react";
import "./styles.css";
import Questionsfile from "./Questionsfile.json";

export default function App() {
return (
 <div className="App">
   <h1>Hello Trivia about Elisa</h1>
   <Trivia name="Elisa" />
 
 </div>
);
}

export class Trivia extends React.Component {
constructor(props) {
 super(props);
 this.handleNextClick = this.handleNextClick.bind(this);
 this.handleBackClick = this.handleBackClick.bind(this);
 this.state = {
   isFinished: false,
   currentQuestion: 0
 };
}

handleNextClick() {
 this.setState({
   isFinished: this.state.currentQuestion === 2 ? true : false,
   currentQuestion: this.state.currentQuestion + 1
 });
}

handleBackClick() {
 this.setState({
   currentQuestion: this.state.currentQuestion - 1
 });
}

render() {
 const finished = this.state.isFinished; // I have to use this
 const currentQuestion = this.state.currentQuestion;
 let buttonNext;
 let buttonBack;
 let questions;

 if (currentQuestion < 3) {
   buttonNext = (
     <NextClickButton
       name={currentQuestion === 2 ? "Submit" : "Next"}
       onClick={this.handleNextClick}
     />
   );
 }

 if (currentQuestion > 0 && !finished) {
   buttonBack = <BackClickButton onClick={this.handleBackClick} />;
 }

// The problem starts here

questions = <Questions index="{currentQuestion}"/>

 return (
   <div>
     <div>{finished ? "You are done" : questions.question }</div>

     {buttonBack}
     {buttonNext}
   </div>
 );
}
}


function NextClickButton(props) {
return <button onClick={props.onClick}>{props.name}</button>;
}

function BackClickButton(props) {
return <button onClick={props.onClick}>Back</button>;
}


export class Questions extends React.Component {


render() {

 return <div>{Questionsfile.questions[this.props.index]}</div>;
}
}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

我在您提交的代码中发现了几个问题。

首先，传递 props 时不需要用字符串换行：

questions = <Questions index={currentQuestion}/>

假设currentQuestion 是一个数字。

接下来，<Questions ... /> 返回一个 React 组件。所以，你不能像 questions.question 这样访问它的属性，你应该把 JSX 内联：

 return (
   <div>
     <div>{finished ? "You are done" : <Questions index={currentQuestion}/> }</div>

     {buttonBack}
     {buttonNext}
   </div>
 );
}
}

希望这些 cmets 能帮助您走上正轨。

【讨论】：

他们做到了，我从 Question 组件内部的 json 访问了 .question 属性，并且它起作用了。那么，我应该总是使用 JSX 内联而不是将其分配给变量吗？这有什么原因吗？也许是一个更好的组织？
就个人而言，我认为将 JSX 放在一起读起来会更好，但没有技术原因不能将它放在变量中。在这种情况下，似乎没有理由创建变量。

【解决方案2】：

对于长期开发，您应该为此使用 Redux，但如果您的组件很少，您仍然可以使用 回调函数。有些像这样example

【讨论】：