【react】react中和vue中的provide/inject、context写法示例

react写法

在 React 中，provide和inject的功能类似于 Vue.js 中的 provide和inject。它们都是用于跨组件层次传递数据的。

在 React 中，没有内置的 provide 和 inject 函数。但是，你可以使用 React 的 Context 来实现类似的功能。

Context 是 React 提供的一种机制，用于在组件树中共享数据。通过创建一个 Context 对象，可以将数据传递给子组件，无论组件层次有多深，子组件都可以通过 contextType 或者 Consumer 来访问这些数据。

下面是一个使用 Context 的简单示例：

// 创建一个 Context 对象
const MyContext = React.createContext();// 在提供者组件中设置数据
class MyProvider extends React.Component {state = {data: "需要共享的数据"};render() {return (<MyContext.Provider value={this.state.data}>{this.props.children}</MyContext.Provider>);}
}// 在消费者组件中访问数据
class MyConsumer extends React.Component {render() {return (<MyContext.Consumer>{value => <div>{value}</div>}</MyContext.Consumer>);}
}// 在组件树中使用提供者和消费者
class MyApp extends React.Component {render() {return (<MyProvider><div><h1>My App</h1><MyConsumer /></div></MyProvider>);}
}ReactDOM.render(<MyApp />, document.getElementById("root"));

上述示例中，MyProvider 组件通过 MyContext.Provider 来提供数据，MyConsumer 组件则通过 MyContext.Consumer 来消费数据。

这些是通过使用 Context 实现类似 provide 和 inject 功能的方式。

vue组合式API的provide/inject写法

在 Vue 3 中，提供了组合式 API（Composition API）来编写组件。使用组合式 API 来实现类似 Vue 2 中 provide 和 inject 的功能，可以按照以下方式进行：

首先，在根组件或者父组件中，使用 provide 函数来提供数据：

import { provide } from 'vue';export default {setup() {const sharedData = '需要共享的数据';provide('sharedData', sharedData);// 其他逻辑...}
};

然后，在子组件（或者后代组件）中，使用 inject 函数来访问被提供的数据：

import { inject } from 'vue';export default {setup() {const sharedData = inject('sharedData');// 使用共享数据...}
};

注意，provide 和 inject 都需要在组件的 setup 函数中使用。provide 函数接受两个参数：第一个参数是提供的数据的键名，第二个参数是具体的数据。inject 函数接受一个参数，即提供的数据的键名，它返回对应的数据。

这样，在子组件中可以通过 sharedData 变量访问到提供的数据。如果没有找到对应的提供的数据，inject 函数会返回 undefined。

需要注意的是，如果使用的是 Vue 2.x 版本，可以继续使用旧版的 provide 和 inject API，不过在 Vue 3 中推荐使用组合式 API 来编写组件。

希望这个示例能够帮助你了解如何使用 Vue 3 的组合式 API 来实现类似 provide 和 inject 的功能。