这取决于应用的风格。如果是一个简单的应用，组件2需要访问组件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

也可以破坏 prop 比如。

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

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

export default ComponentTwo

根据其关系，有三种不同的通信B/w组件。
1.将数据从父级传递到子级
为了从父组件向子组件传递数据，我们使用了props。Props数据由父组件发送，子组件不能更改，因为它们是只读的。
1.将数据从子代传递到父代
为了将数据从子组件传递给父组件，我们需要在父组件中创建一个回调函数，然后将回调函数作为prop传递给子组件，这个回调函数将从子组件中获取数据，子组件使用prop调用父回调函数，并将数据传递给父组件。

1. B同级传递数据
   对于在兄弟节点之间传递数据，有多种方法可供选择，如下所示：

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

从this链接复制过来的，你应该检查一下给定的链接，看看什么时候我们有这样的关系B/w组件，什么时候用什么。

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

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) {}
        }