Существует несколько способов передачи данных дочерним компонентам.
- Использование свойств
//In Grandparent
<Parent dataToParent={someData}/>
//In Parent
<Child dataToChild={props.dataToParent}/>
//Using in Child
render(){
{props.dataToChild}
}
Рендеринг реквизита (пропуск иерархии)
https://reactjs.org/docs/render-props.html
//In Grandparent component
<Parent dataToParent={dataFromParent => (
<Child>{dataFromParent}</Child>
)}/>
Хранение данных в центральном состоянии
Контекстный API: https://reactjs.org/docs/context.html
Сторонние библиотеки:
т.е. Redux https://redux.js.org/
Изменить:
Спасибо за обновление вопроса. Глядя на иерархию, кажется, что вы имеете дело с родственными компонентами. т.е. MainContent -> MockTable - это место, где вы извлекаете данные, а MainContent -> AddMock -> TabContent -> UsecasePane - это место, где вы хотите отображать / передавать данные. Для обоих из них непосредственным общим родителем является MainContent.
Если вы не хотите использовать ContextAPI или любую другую стороннюю библиотеку. Я бы предложил поднять ваши состояния до MainContent и передать функцию обратного вызова MockTable и передать состояние MainContent -> AddMock -> TabContent -> UsecasePane
Рассмотрим следующий пример:
//MainContent.js
const MainContent = () => {
...
const [data, setData] = useState([]);
...
return (
<div >
<CustomerTable />
<AddMock setData={setData} /> {/*Passing callback function*/}
<MockTable data={data} /> {/*Passing state*/}
</div>
);
};
export default MainContent;
//AddMock.js
...
const fetchData = async () => {
// all data fetching logic remains the same.
let list = [response.data];
props.setData(list); //Calling callback function to set the state defined in MainContent.js
};
useEffect(() => {
fetchData();
}, []);
...
//AddMock.js
const AddMock = ({data}) => {
return (
<div className="row">
<Container className="mockbody">
<Header as="h3">Hierarchy</Header>
<TabContent data={data} /> {/*Passing data props*/}
</Container>
</div>
);
};
export default AddMock;
//TabContent.js
const TabContent = ({data}) => {
const panes = [
{
menuItem: "Usecase",
render: () => <Tab.Pane attached={false}>{<UsecasePane data={data} />}</Tab.Pane>,
}
];
return(
<Tab menu={{ secondary: true, pointing: true }} panes={panes} />
)
}
export default TabContent;
//
Здесь вы можете видеть, что для передачи данных происходит некоторая prop drilling, хотя это не антипаттерн, но мы бы рекомендовали избегать как можно большего количества специальных компонентов в функциональных компонентах, поскольку они этого не делают. t имеют поддержку shouldComponentUpdate() или React.PureComponent, в противном случае вы можете использовать React.memo HO C Подробнее .
Конечно, React.Context или сторонние библиотеки, то есть Redux (хотя это будет излишне для небольших приложений) есть несколько альтернатив всем этим.