我应该使用哪个 React 组件和参数？

Question

这是我的 MainLayout 组件：

export const MainLayout = ({header, content, footer}) =>(
<div>
    <header>
        {header}
    </header>
    <main>
        <Paper style={contentStyle} zDepth={1}>
            {content}
        </Paper>
    </main>
    <footer>
        <Paper style={contentStyle}>
            {footer}
        </Paper>
    </footer>
</div>);

这是我的带有 React.Component 的 MainLayout

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>
    )
}}

当我使用我的第一个 MainLayout 组件时，所有页眉、内容和页脚都可以正常工作。我想添加 constructor() 和 componentDidMount() 但我不能！因此，我尝试将 ES6 类（我的第二个 MainLayout 的 React.Component）与 contrucor() 一起使用，我添加了 3 个参数。这对我有用！ 但是，当我链接到其他页面时，内容没有响应。我的意思是旧的内容还是一样的。 Unitl我刷新页面然后内容就改变了！

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

Answer 1

Stateless components (const mainLayout = () => {}) 只是函数，因此它们缺少构造函数和生命周期方法。

当您使用ES6 class component 时，所有属性都附加到this.props。您不必手动将它们添加到this。每当一个 prop 发生变化时，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>
    )
}}

如果你不想一直引用this.props，你可以使用解构，就像你在无状态组件中所做的那样：

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>
    )
}}

顺便说一句 - contentStyle 来自哪里？