Как визуализировать компонент React только при нажатии

Question

Я изучаю React, и у меня все еще возникают проблемы с пониманием того, как некоторые из них работают. У меня есть следующий код:

var Table = React.createClass({ 
    render: function render() { 
     var _self = this; 
     var thead = this.props.cols.map(function (col) { 
        return React.DOM.th({}, col); 
      } 
     var tbody = this.props.rows.map(function (row) { 
       ..... 
     }); 
     return React.DOM.table({className:'table-striped'}, [thead, tbody]); 
    } 
}); 

<script type="text/babel"> 
var tableModel = { 
    cols: ["head1", "head2"], 
    rows: [ 
     {"head1": "content1", "head2": "content2"}, 
    ], 
} 

React.render(React.createElement(Table,tableModel), document.getElementById('id')); 
</script> 

Он отлично работает, он создает таблицу. Я не могу, однако, из-за жизни меня найти, как это сделать только при нажатии определенной ссылки. Так что на моей странице у меня есть нормальная ссылка, и я хочу, чтобы это было создано при нажатии этой кнопки. Как это можно сделать? Я искал несколько хороших минут, но похоже, что никто не пытается добиться чего-то подобного.

Answer 1

Это неловко, но я нашел проблему. После не работает:

<script type="text/babel"> 
var tableModel = {..} 
</script>  
<button onClick="React.render(React.createElement(Table,tableModel), document.getElementById('open_request_list_content'));">click</button> 

, а следующее (только типа сценария отличается) делает работу:

<script type="text/javascript"> 
var tableModel = {..} 
</script>  
<button onClick="React.render(React.createElement(Table,tableModel), document.getElementById('open_request_list_content'));">click</button> 

Я предполагаю, что есть еще вещи, чтобы узнать о Вавилонской ...