reactjs - 如何使用 React Bootstrap Table 制作条件列？

Question

在我的 WorkbookList 组件的 render 方法中，我有

render() {

  const tableHTML = (
    <BootstrapTable data={this.props.workbooks} striped={true} hover={true}>
      <TableHeaderColumn
        dataField="id"
        isKey={true}
        dataAlign="center"
        columnClassName={ this.tdClassFormatter }
        width='50px'>
        ID
      </TableHeaderColumn>
      <TableHeaderColumn dataField="createdAt" width='130px' dataFormat={(cDate) => moment(cDate).format('MMM D, \'YY (h:mm a)')}>Created On</TableHeaderColumn>
      {!this.props.minimized && (<TableHeaderColumn dataField="id" dataFormat={this.actionFormatter} dataAlign="center"></TableHeaderColumn>)}
    </BootstrapTable>
  )

  return (
    <div>
      <h2 className="clearfix">
        <div className="pull-left">Workbooks</div>
        <div className="pull-right">
          <LinkContainer to={`/workbooks/create/${this.props.studentId}`}>
            <Button bsStyle="success">Add</Button>
          </LinkContainer>
        </div>
      </h2>

      {tableHTML}
    </div>
  )
}

当我加载组件时:

<WorkbookList workbooks={this.props.studentState.workbooks} studentId={this.props.params.studentId} minimized={true} />

但这给了我一个错误:

Uncaught TypeError: Cannot read property 'props' of null
    at bundle.js:159154
    at forEachSingleChild (bundle.js:11160)
    at traverseAllChildrenImpl (bundle.js:12178)
    at traverseAllChildrenImpl (bundle.js:12194)

那么如何有条件地显示一列？

Answer 1

您的tableHTML应该是无状态组件。无状态组件是接收 props 的函数。
例如(根据您自己的需要应用)

class MainCmp extends Component {
    render(){
        const TableHTML = (props) => {
            return (
                <div style={props.color}>
                    <h1>
                        Title
                    </h1>
                    {
                        props.show ? <span>Some message</span> : null
                    }                    
                </div>
            );
        };

        return (
            <div>
                Main
                <TableHTML color={{color:'blue'}} show={true} />
            </div>            
        );
    }
}

并允许动态显示/隐藏使用一些状态处理程序。观察者发现无状态组件内的 props 不使用 this 关键字。