在 React 中将状态数据从一个组件传递到另一个组件
Posted
技术标签:
【中文标题】在 React 中将状态数据从一个组件传递到另一个组件【英文标题】：Passing state data from one component to Another In React 【发布时间】：2021-01-02 13:56:04 【问题描述】：我有两个组件，一个用于从两个输入字段获取 JSON 数据，另一个用于显示收集的数据并将其用于不同目的。从 JSON 文件中获取数据后，我将它们设置为第一个组件的状态。
我的问题是如何将在第一个组件中获得的设置为状态的数据发送到另一个组件，以便我可以在第二个组件中以表格的形式显示数据。
第一个组件：
export class comp extends Component
constructor(props)
super(props);
this.state =
uploadfile1:null,
uploadfile2:null
this.readFile = this.readFile.bind(this);
readFile(e)
/*Reading JSON Files*/
const file = e.target;
const fileId = file.id;
if (/\.(json)$/i.test(file.files[0].name) === false)
alert("Not valid JSON file!");
else
const fileReader = new FileReader();
fileReader.readAsText(file.files[0], "UTF-8");
fileReader.onload = () =>
console.log(fileReader.result);
const data = JSON.parse(fileReader.result);
this.setState(
['upload' + fileId]: data
)
;
render()
return (
<div className="new-audit-content-wrapper">
<input onChange=this.readFile type="file" id="file1" className="inputfile"/>
<label htmlFor="file1">Browse for files</label>
<input onChange=this.readFile type="file" id="file2" className="inputfile"/>
<label htmlFor="file2">Browse for files</label>
</div>
)
第二个组件；
export class table extends Component
render()
return (
<div className="wrapper">
<thead className="table-head">
<tr className="table-head-cols">
<th className="col-1">Seq#</th>
<th className="col-2">Data Audit Row #</th>
</tr>
</thead>
<tbody className="table-body">
<tr className="table-body-cols">
<td className="table-body-col-1">1</td>
<td className="table-body-col-2">3</td>
</tr>
</tbody>
</div>
)
我只需要使用 Props 将数据从第一个组件状态传递到第二个组件吗？我不知道确切的解决方案，因为我是新手。
谢谢
【问题讨论】：
【参考方案1】：您需要将数据作为道具传递，并将“第二个组件”作为“第一个组件”的子组件。
render()
return (
<div className="new-audit-content-wrapper">
<input onChange=this.readFile type="file" id="file1" className="inputfile"/>
<label htmlFor="file1">Browse for files</label>
<input onChange=this.readFile type="file" id="file2" className="inputfile"/>
<label htmlFor="file2">Browse for files</label>
/* Add the table below, similar to the example */
<Table data=this.state.uploadFile1 />
</div>
)
我不知道你是否在跟随一个例子，但你已经直觉地走（或开始走......）进入一个模式：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
【讨论】：
略有相关，但可能对 OP 有帮助；有一种模式叫做“数据下降，行动上升”。保持应用程序“单向”流动是一种很好的做法。【参考方案2】：您可以将函数作为道具发送并使用它来更新父组件中的数据。看这个例子：
父.JSX
import React, useState from 'react';
import Child from './Child'
export default () =>
const [updateValue, setUpdateValue] = useState('Initial Value')
const parentFunction = (e) =>
console.log(e.target.value)
setUpdateValue(e.target.value)
return (
<>
<h1>updateValue</h1>
<Child parentData="Parent Data" updateValue=parentFunction />
</>
)
Child.jsx
import React from 'react';
export default (parentData, updateValue) =>
return (
<>
<h2>parentData</h2>
<input type="text" onChange=(e) => updateValue(e) />
</>
)
【讨论】：
【参考方案3】：将您的第二个组件更改为功能组件，从道具接收数据，并使用数据来呈现您的标记：
export function Table (props)
const data = props
return (
<div className="wrapper">
<thead className="table-head">
<tr className="table-head-cols">
<th className="col-1">Seq#</th>
<th className="col-2">Data Audit Row #</th>
</tr>
</thead>
<tbody className="table-body">
/* You can use your data here to render the table rows */
<tr className="table-body-cols">
<td className="table-body-col-1">1</td>
<td className="table-body-col-2">3</td>
</tr>
</tbody>
</div>
)
在你的第一个组件中，导入你的第二个组件
import Table from "../component/Table"
export class comp extends Component
constructor(props)
super(props);
this.state =
uploadfile1:null,
uploadfile2:null
this.readFile = this.readFile.bind(this);
readFile(e)
/*Reading JSON Files*/
const file = e.target;
const fileId = file.id;
if (/\.(json)$/i.test(file.files[0].name) === false)
alert("Not valid JSON file!");
else
const fileReader = new FileReader();
fileReader.readAsText(file.files[0], "UTF-8");
fileReader.onload = () =>
console.log(fileReader.result);
const data = JSON.parse(fileReader.result);
this.setState(
['upload' + fileId]: data
)
;
render()
return (
<div className="new-audit-content-wrapper">
<input onChange=this.readFile type="file" id="file1" className="inputfile"/>
<label htmlFor="file1">Browse for files</label>
<input onChange=this.readFile type="file" id="file2" className="inputfile"/>
<label htmlFor="file2">Browse for files</label>
<Table data=this.state.data />
</div>
)
【讨论】：
【参考方案4】：正如 Zac 所说，React 团队推荐的解决方案是最安全的方法，即调用 Second 组件作为 Parent/first 组件的子组件，或者如果您有 ENTRY 组件，则从他们的 Read json 状态传递给孩子。 谢谢
【讨论】：
以上是关于在 React 中将状态数据从一个组件传递到另一个组件的主要内容，如果未能解决你的问题，请参考以下文章
如何在 React Native 中将矢量从类组件传递到另一个组件？