在React中,可以通过使用上下文(Context)来将数据传递到组件树中的任意层级,而不必通过中间组件传递数据。下面是一种实现方式:
import React from 'react';
const MyContext = React.createContext();
import React from 'react';
const MyContext = React.createContext();
class GrandParent extends React.Component {
render() {
return (
<MyContext.Provider value="孙子数据">
<Parent />
</MyContext.Provider>
);
}
}
MyContext.Consumer
来获取上下文的值:import React from 'react';
const MyContext = React.createContext();
class Parent extends React.Component {
render() {
return (
<div>
<Child />
</div>
);
}
}
class Child extends React.Component {
render() {
return (
<MyContext.Consumer>
{value => <p>{value}</p>}
</MyContext.Consumer>
);
}
}
这样,孙子组件中的数据就可以通过上下文传递到GrandParent组件中,而不必经过中间组件。需要注意的是,使用上下文传递数据时,要确保上下文对象的Provider组件包裹了需要访问上下文数据的组件。
领取专属 10元无门槛券
手把手带您无忧上云