Question

我的Stepper组件应根据屏幕大小以垂直或水平布局呈现。出于这个原因，我使用道具＆＃34; verticalLayout＆＃34;。如果我以垂直模式渲染它（verticalLayout = {true}），一切似乎都运行得很好。只要我以水平模式渲染（verticalLayout = {false}），它就会停止使用Uncaught TypeError: Cannot read property 'props' of null

我的搜索没有产生任何答案，我尝试了所有我能想到的东西（用let变量替换它，重构代码以检查这个＆amp;＆amp; 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专家，但我认为＆＃39;这个＆＃39;未正确绑定到MyReactiveStepperComponent。您可以使用ES6箭头函数语法来解决这个问题：

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

或者将调用绑定到this，这是不推荐的。

Answer 2

也许不是您正在寻找的答案，但有关Github网页的公开讨论：

Stepper: Allow null children #6004

在紧要关头，您可以考虑编写一个动态添加StepContent的renderStepChildren（）函数。像这样（未经测试）：

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>

React material-ui Stepper orientation Uncaught TypeError：无法读取属性＆＃39; props＆＃39;为null

2 个答案: