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

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コンポーネントを使用して、コンテンツと私のMainLayoutですフッターは正常に動作します。 コンストラクタ（）とcomponentDidMount（）を追加したいのですが、できません！だから、私はconstrucor（）と私は3つのパラメータを追加すると、ES6クラス（私の2番目のMainLayoutのReact.Component）を使用しようとしている。それは私の仕事です！ しかし、他のページにリンクすると、そのコンテンツは応答しません。私は古いコンテンツがまだ同じであることを意味します。 Unitl私はページをリフレッシュして、コンテンツが変更されました！

これらのコンポーネントを作成して間違っているかどうか教えてください。そんなにあなたの助力 ありがとう：D

Answer 1

Stateless components（const mainLayout =() => {}）は関数だけなので、コンストラクタとライフサイクルメソッドを欠いています。

ES6 class componentを使用している場合、すべての属性はthis.propsに添付されます。 thisに手動で追加する必要はありません。小道具が変更されるたびに、反応はコンポーネントを再描画します。

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がから来ているんどこ？