Reactjs 我应该在参数中使用哪个React组件？

这是我的主布局组件：

export const MainLayout=（{header，content，footer}）=>(
{header}
{content}
{footer}
);

这是我的带有React.Component的主布局

导出类MainLayout扩展React.Component{
构造函数（{页眉、内容、页脚}）{
超级（）；
this.header=头；
this.content=内容；
this.footer=页脚；
}
render（）{
返回(
{this.header}
{this.content}
{this.footer}
)
}}

当我使用第一个MainLayout组件时，所有的页眉、内容和页脚都能正常工作。我想添加构造函数（）和组件didmount（），但我不能！因此，我尝试使用ES6类（第二个主布局的React.Component）和construcor（）我添加了3个参数。这是我的工作但是，当我链接到其他页面时，内容没有响应。我的意思是旧内容仍然相同。我刷新页面，然后内容就改变了

那么你能告诉我我在创建这些组件时是否犯了错误吗？ 非常感谢你的帮助

（

contmainlayout=（）=>{}

）只是函数，因此它们缺少构造函数和生命周期方法

使用时，所有属性都附加到

this.props

。您不必手动将它们添加到此中。每当道具更改时，react将重新渲染组件

export class MainLayout extends React.Component{
constructor(props){ // not strictly needed, but since you want a constructor anyway...
    super(props);
}
render(){
    return(
        <div>
            <header>
                {this.props.header} // all props are bound to this.props
            </header>
            <main>
                <Paper style={contentStyle} zDepth={1}>
                    {this.props.content} // all props are bound to this.props
                </Paper>
            </main>
            <footer>
                <Paper style={contentStyle}>
                    {this.props.footer} // all props are bound to this.props
                </Paper>
            </footer>
        </div>
    )
}}

---

顺便说一句，contentStyle从何而来？

我将纸张样式添加到内容中：D非常感谢！这真的帮了我的忙！欢迎

contentStyle

不应该是道具之一吗？是的！现在我有问题了。我想在屏幕响应（大、中、小）时自动更改contentStyle。或者你想让我把contentStyle放在构造函数中？如果我不明白你的意思，我很抱歉：DIt取决于你想把响应逻辑放在哪里。我的新问题没有任何答案：(

export class MainLayout extends React.Component{
constructor({header, content, footer}){
    super();
    this.header = header;
    this.content = content;
    this.footer = footer;
}
render(){
    return(
        <div>
            <header>
                {this.header}
            </header>
            <main>
                <Paper style={contentStyle} zDepth={1}>
                    {this.content}
                </Paper>
            </main>
            <footer>
                <Paper style={contentStyle}>
                    {this.footer}
                </Paper>
            </footer>
        </div>
    )
}}

export class MainLayout extends React.Component{
constructor(props){ // not strictly needed, but since you want a constructor anyway...
    super(props);
}
render(){
    return(
        <div>
            <header>
                {this.props.header} // all props are bound to this.props
            </header>
            <main>
                <Paper style={contentStyle} zDepth={1}>
                    {this.props.content} // all props are bound to this.props
                </Paper>
            </main>
            <footer>
                <Paper style={contentStyle}>
                    {this.props.footer} // all props are bound to this.props
                </Paper>
            </footer>
        </div>
    )
}}

export class MainLayout extends React.Component{
constructor(props){ // not strictly needed, but since you want a constructor anyway...
    super(props);
}
render(){
    const { header, content, footer } = this.props; // destructure this.props to consts

    return(
        <div>
            <header>
                {header}
            </header>
            <main>
                <Paper style={contentStyle} zDepth={1}>
                    {content}
                </Paper>
            </main>
            <footer>
                <Paper style={contentStyle}>
                    {footer}
                </Paper>
            </footer>
        </div>
    )
}}