Question

在我的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)

但这给了我一个错误：

library(shiny)
library(DT)
runApp(shinyApp(
  ui = fluidPage(
                   DT::dataTableOutput('table')  ,
                   selectInput("NUMBER", "Number:", c(1,100,1000000),selected = 1),
                   plotOutput("p")
                   ),
  server = function(input, output, session) {

    NUMBER = reactive({
      input$NUMBER
    })

    output$table <- DT::renderDataTable({
      datatable(data.frame(a = c(85,7),b=c(444,2)), rownames = FALSE, selection = 'none', callback=

      JS("table.on('click.dt', 'tr', function() {
           var data=table.row(this).data();
           Shiny.onInputChange('rows',data[0]);
          });")
      )}
    )

    observeEvent(input$rows, {

      print( input$rows)   
      print( class( input$rows)  )
      a = as.numeric(input$rows)

      print(a)
      print(NUMBER())
      new_number = a      #THIS WORKS!!!
      #new_number = a  * as.numeric(NUMBER())    #THIS DOES NOT WORK     multiple a by the number in the slider when the SLIDER Is CHANGED

      output$p = renderPlot({

        # browser()
        plot( new_number )
      })

    })}
))

那么我怎么能有条件地显示一个列呢？

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

并允许动态显示/隐藏使用一些状态处理程序。在无状态组件内部支持的观察者不使用此关键字。

如何使用React Bootstrap Table执行条件列？

1 个答案: