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

Question

我刚刚开始学习react。 如果我有一个包含两个变量的组件，那么在另一个组件中访问这些变量的最简单方法是什么？使用 props、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```

Answer 1

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

组件1.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

Answer 2

根据它们的关系，存在三种不同的通信黑白组件。

1. 从父级到子级传递数据

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

2. 将数据从子级传递到父级

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

3. 通过兄弟姐妹传递数据

为了在兄弟姐妹之间传递数据，我们可以选择多种方法，如下所示：

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

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

Answer 3

上面的示例忽略了一个重要的需求，即使用方法参数传递数据。

In parent component,

    const [argdata, setargData] = React.useState(""); // to reflect change in parent when child data change.
      const parentCallback = (args: string) => {
        setargData(args);
        console.log("onVariablesChanged called", vardata);
      };
    
      <ChildComponent
       childFunc={parentCallback} 
      />
    
    In Child Component,
    
     export type ChildComponentProps = {childFunc:(args:string) => void}
        
        export default function ChildComponent(childFunc):ChildComponentProps) {
         try{childFunc('anything');}
        catch(ex) {}
        } 

导出 var 然后导入是另一种解决方案。 也可以使用上下文对象。