React.js 将一个组件变量传递给另一个组件，反之亦然答案

【问题标题】：React.js passing one components variables to another component and vice-versaReact.js 将一个组件变量传递给另一个组件，反之亦然
【发布时间】：2022-01-17 11:48:28
【问题描述】：

我刚刚开始学习反应。如果我有一个包含两个变量的组件，那么在另一个组件中访问这些变量的最简单方法是什么？使用道具、useState、useContext？如何使用 ComponentTwo 中的两个变量。

import React from 'react';

ComponentOne = () => {

varOne = Mike;
varTwo = Tyson;

Return(
<div>
</div>
)}

export default ComponentOne

import React from 'react';
import ComponentOne from '../OtherFolder/';

ComponentTwo = () => {

Return(
<div>
<p>{varOne}, {varTwo}</p>
</div>
)}

export default ComponentTwo```

【问题讨论】：

标签： javascript html node.js reactjs

【解决方案1】：

这取决于您应用的风格。如果它是一个简单的应用程序，其中组件二需要访问组件一个变量，那么 props 将很容易使用。但是，随着应用程序的扩展，您需要考虑组件 2 需要访问全局状态的情况。然后，事情发生了变化。假设您的 ComponentOne 是包含和控制状态的父级，而 ComponentTwo 是子级，并且只会使用从父级传递的状态。

Component1.js

import React from 'react';
import ComponentTwo from "./yourcomponent2directory.js"

const ComponentOne = () => {

varOne = Mike;
varTwo = Tyson;

return
(
<div>
<ComponentTwo varOne={varOne} varTwo={varTwo}/>
</div>
)}

export default ComponentOne

ComponentTwo.js

import React from 'react';
import ComponentOne from '../OtherFolder/';

const ComponentTwo = (props) => {

return(
<div>
<p>{props.varOne}, {props.varTwo}</p>
</div>
)}

export default ComponentTwo

或者你可以像...一样解构道具

const ComponentTwo = ({varOne,varTwo}) => {

return(
<div>
<p>{varOne}, {varTwo}</p>
</div>
)}

export default ComponentTwo

【讨论】：

如果它是一个简单的应用程序？而你在哪里使用道具，你会怎么做？
称为父子组件交互

【解决方案2】：

根据它们的关系，存在三种不同的通信 b/w 组件。

父子之间传递数据

为了将数据从父组件传递到子组件，我们使用道具。 props 数据由父组件发送，子组件不能更改，因为它们是只读的。

将数据从子级传递给父级

为了将数据从子组件传递给父组件，我们必须在父组件中创建一个回调函数，然后将回调函数作为prop传递给子组件。此回调函数将从子组件中检索数据。子组件使用 props 调用父回调函数，并将数据传递给父组件。

传递数据 b/w 兄弟姐妹

对于兄弟之间的数据传递，我们可以选择多种方法，如下所示：

结合以上两种方法（回调和使用道具）。
使用 Redux。
上下文API

#复制自this 链接。您应该检查给定的链接，并了解当我们有这种关系时如何通过黑白组件以及何时使用什么。

【讨论】：

谢谢，马上通读。