在React中访问组件外部的组件状态数据可以通过props和context来实现。
示例代码:
// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const [data, setData] = useState('Hello World');
return (
<div>
<ChildComponent data={data} />
</div>
);
};
// 子组件
import React from 'react';
const ChildComponent = (props) => {
return (
<div>
<p>{props.data}</p>
</div>
);
};
export default ChildComponent;
示例代码:
// 创建一个Context对象
const MyContext = React.createContext();
// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const [data, setData] = useState('Hello World');
return (
<MyContext.Provider value={data}>
<ChildComponent />
</MyContext.Provider>
);
};
// 子组件
import React from 'react';
const ChildComponent = () => {
return (
<MyContext.Consumer>
{(data) => (
<div>
<p>{data}</p>
</div>
)}
</MyContext.Consumer>
);
};
export default ChildComponent;
这样,子组件就可以通过props或context来访问和使用外部组件的状态数据。
领取专属 10元无门槛券
手把手带您无忧上云