Wie mache ich bedingte Spalten mit React Bootstrap Table?

Question

In meiner render Methode meiner WorkbookList Komponente habe ich

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

Wenn ich die Komponente laden:

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

Aber das gibt mir eine Fehlermeldung:

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) 

So kann, wie Ich zeige bedingt eine Spalte?

Answer 1

Ihre tableHTML sollte eine zustandslose Komponente sein. Stateless-Komponenten sind Funktionen, die Requisiten erhalten.
z.B. (Gelten für Ihre eigenen Bedürfnisse)

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

und dynamische Show/Hide verwenden einige Zustand Handler zu ermöglichen. Beobachter, die innerhalb der zustandslosen Komponente unterstützen, verwenden dieses Schlüsselwort nicht.