React material-ui Stepper orientationキャッチしないTypeError：nullのプロパティ 'props'を読み取ることができません

Question

My Stepperコンポーネントは、画面サイズに応じて縦または横のレイアウトでレンダリングする必要があります。そのため私は小道具「verticalLayout」を使用しています。それを垂直モードでレンダリングすると（verticalLayout = {true}）、すべてが正常に動作しているようです。

私の検索では答えが出ませんでした。これをlet変数（リファクタリング）で置き換えてみました。これが& & this.props ...など）であるかどうかをチェックするコードですが、垂直レイアウト内のすべての参照を削除するだけでエラーが取り除かれます。私は迷っていて、あなたの助けに大変感謝しています。ここに私のコードは次のとおりです。

import React, {Component} from 'react'; 

import { 
    Step, 
    Stepper, 
    StepLabel, 
    StepContent, 
} from 'material-ui/Stepper'; 

export default class MyReactiveStepperComponent extends Component { 
    render() { 
    console.info(this.props.verticalLayout) 
    return (
     <div> 
     <Stepper activeStep={this.props.activeStep} orientation={this.props.verticalLayout ? "vertical" : "horizontal"}> 
      <Step> 
      <StepLabel>Step 1</StepLabel> 
      { console.warn(this.props) && this.props.verticalLayout && 
      <StepContent> 
       {this.props.children} 
      </StepContent> 
      } 
      </Step> 
      <Step> 
      <StepLabel>Step 2</StepLabel> 
      { this.props.verticalLayout && 
      <StepContent> 
       {this.props.children} 
      </StepContent> 
      } 
      </Step> 
      <Step> 
      <StepLabel>Step 3</StepLabel> 
      { this.props.verticalLayout && 
      <StepContent> 
       {this.props.children} 
      </StepContent> 
      } 
      </Step> 
      <Step> 
      <StepLabel>Step 4</StepLabel> 
      { this.props.verticalLayout && 
      <StepContent> 
       {this.props.children} 
      </StepContent> 
      } 
      </Step> 
     </Stepper> 
     { !this.props.verticalLayout && <div> { this.props.children } </div> } 
     </div> 
    ); 
    } 
} 

Answer 1

次の問題があるようです：

{ this.props.verticalLayout && 
    <StepContent> 
    {this.props.children} 
    </StepContent> 
} 

私は、JavaScriptの専門家ではないが、私は「これ」が正しくMyReactiveStepperComponentにバインドされていないと思います。 あなたはES6矢印関数の構文を使用して、この周りを働かせることができる：

{ 
() => this.props.verticalLayout && (
    <StepContent> 
     {this.props.children} 
    </StepContent> 
) 
} 

それともrecommandedされていないthisへの呼び出しを、結合します。

Answer 2

たぶん

ないあなたが探している答えが、それについてのGithubページでオープンな議論があります：ピンチで

Stepper: Allow null children #6004

は、あなたが動的にrenderStepChildren（）関数を書いて検討するかもしれませんStepContentを追加します。このような何か（未テスト）：

renderStepChildren = (verticalLayout) => { 
    const children = []; 

    children.push(<StepLabel key={0}>...</StepLabel>); 
    if (verticalLayout) { 
    children.push(<StepContent key={1}>...</StepContent>); 
    } 

    return children; 
}; 

次に、あなたのrender（）メソッドで：

<Step> 
    {this.renderStepChildren(this.props.verticalLayout)} 
</Step>