同一文件夹下的组件如何获取到另一个组件传入的数据

在同一文件夹下，两个JavaScript组件想要互相传递数据，通常会通过事件监听、props或自定义的模块化系统来实现。这里有几个常见的方法：

1. **通过props** (属性)：如果这两个组件存在直接的关系，比如一个是父组件，另一个是子组件，那么可以直接将数据作为props从上层组件传递给下层组件。

// 父组件
<ChildComponent data={parentData} />

// 子组件
function ChildComponent(props) {
  console.log(props.data); // 获取到父组件传来的数据
}

2. **通过事件**：通过`addEventListener`监听事件，并在触发事件时携带数据。

// 发送者组件
onClick={() => sendData('eventKey', eventData)}

// 接收者组件
onEvent(e) {
  if (e.key === 'eventKey') {
    console.log(e.data);
  }
}

<button onClick={this.sendData}>点击发送</button>

3. **状态管理库** (如Redux, MobX等)：全局存储共享的状态，在需要的地方订阅或更新数据。

4. **自定义模块化系统** (如有专门设计的数据API)，可以封装成公共服务或提供者-消费者模式。

5. **React Context API** 或 `useContext`：当数据在整个应用范围需要被复用时，可以创建一个上下文对象供所有组件访问。

每个方法都有其适用场景，选择合适的方式取决于项目的结构、需求以及团队的技术栈偏好。