如何将函数组件的子组件传递给反应类中的另一个函数组件？答案

【问题标题】：How can I pass the children of a function component to another function component in a react class?如何将函数组件的子组件传递给反应类中的另一个函数组件？
【发布时间】：2021-05-06 23:29:39
【问题描述】：

class About extends React.Component<{},{}>{
    Format = () => {
        return(
            <div>
                {this.props.children}
            </div>
        )
    }

    Type1 = () => {
        return(
            <this.Format>
                <div>...</div>
            </this.Format>
        )
    }
}

我正在尝试将 <div>...</div> 传递给 Format 组件，但我收到错误：Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes'，我找不到关于此案例的太多信息。

【问题讨论】：

标签： reactjs components react-props

【解决方案1】：

找到答案了，必须传入props作为参数，因为this.props指的是类props而不是函数props。

    Format = (props) => {
        return(
            <div>
                {props.children}
            </div>
        )
    }

【讨论】：

虽然像在类组件中那样编写这样的功能组件并不常见。通常，您希望将功能组件单独抽象到另一个文件中，以便在其他地方轻松重用。