Как сделать условные столбцы с помощью таблицы React Bootstrap?

Question

В моем render методе моего WorkbookList компонента, у меня есть

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 должен быть без гражданства. Безстоящие компоненты - это функции, которые получают реквизиты.
, например. (Применяются к вашим собственным потребностям)

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

И разрешить динамическое Используйте показать/скрыть некоторые обработчик состояния. Наблюдатель, что реквизит внутри компонента без гражданства не использует это ключевое слово.