4

私のコンポーネントの私の方法では、私は持ってい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)

では、条件付きで列を表示するにはどうすればよいでしょうか?

4

1 に答える 1

2

あなた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>            
        );
    }
}

また、動的な表示/非表示を許可するには、状態ハンドラーを使用します。ステートレス コンポーネント内で props するオブザーバーは、このキーワードを使用しません。

于 2017-02-21T20:12:34.047 に答える