javascript - 从组件的 props.children 访问父状态：

Question

我正在为要创建的 d3 折线图制作一个容器，到目前为止我的格式是这样的：

import React from "react";
import AnalyticPads from "../AnalyticPad/AnalyticPad";
import Pad from "../AnalyticPad/Pad";
import MainContent from "../AnalyticPad/MainContent";
import Extention from "../AnalyticPad/Extention";



const GraphPad = () => {

    return ( 
        <AnalyticPads properties={{height: "200px"}}>
            <Pad>
                <MainContent>

                </MainContent>
                <Extention>

                </Extention>
            </Pad>
        </AnalyticPads>
    )

}

export default GraphPad;

我的“AnalyticsPad”看起来像这样：

import React from "react";

const AnalyticPads = (props) => {

    return ( 

       <div className="analytic-pad-container">
            {props.children}
       </div>
    )

}

export default AnalyticPads;

我想要的是会有一个“垫子”网格，我希望这个“AnalyticsPad”为每个垫子提供默认样式，例如，如果我希望每个垫子的高度为 200px，我将它设置在这个包装器中，然后对于我想与默认值不同的任何单个焊盘，我可以覆盖它。

“MainContent”组件是折线图所在的位置，任何额外的信息都将放在“Extention”中，如果按下按钮，它将呈现。

在我的 react 应用程序中，我一直使用上下文 api 向子组件提供数据，但我知道（或认为）这样做是不好的做法，据我所知，上下文只能用于向全局组件提供数据。

什么是最佳实践？

请不要回答类组件的解决方案，因为我以前从未使用过它们，因为我是新手。

标签： javascriptreactjsreact-state