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>

我想还有待学习巴贝尔的事情......

如何仅在单击时呈现React组件

1 个答案: