我应该将哪个 React 组件与参数一起使用？

Question

This is my MainLayout Component:

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

This is my MainLayout with React.Component

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 class（我的第二个 MainLayout 的 React.Component）与 construcor() 一起使用，我添加了 3 个参数。这对我有用！ 但是，当我link转到其他页面时，内容没有响应。我的意思是旧内容仍然一样。 Unitl我刷新页面然后内容被更改！

So can you tell me if I made mistakes with creating these component? Thanks so much your helping :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 从何而来？

我应该将哪个 React 组件与参数一起使用？

which React component should i use with parameters?

reactjs

material-ui