javascript - 在 reactjs 中合成 html 代码

Question

我目前正在尝试从 React 中的数据呈现一个表格，我有这个:

import React, { Component, PropTypes } from 'react';

// Column component - represents columns in the table
export default class Table extends Component {
setHtmlHead(data) {
    var html = "";
    for (var property in data) {
        if (data.hasOwnProperty(property)) {
            html += "<th>" + data[property] + "</th>";
        }
    }
    return "<tr>" + html + "</tr>";
}

setHtmlBody(data) {
    var html = "";
    for (var i = 0, len = data.length; i < len; i++) {
        var row = data[i];
        html += "<tr>";
        for (var property in row) {
            if (row.hasOwnProperty(property)) {
               html += "<td>" + row[property] + "</td>";
            }
        }
        html += "</tr>";
    }
    return html;
}

render() {
    return (
        <table className='table table-bordered'>
            <thead dangerouslySetInnerHTML={{ __html: this.setHtmlHead(this.props.data[0]) }} />
            <tbody dangerouslySetInnerHTML={{ __html: this.setHtmlBody(this.props.data.slice(1), "td") }} />
        </table>
    );
}
}

如您所见，我在这方面的做法大多是错误的，很可能(希望如此？)。必须有一种方法可以动态添加 <th> es 在渲染函数中，但我无法弄清楚。

我希望能够执行一个 for 循环，就像在 setHtml() 中一样上面的函数，但我不想附加字符串，而是想附加 html 代码。另外，可能在 render 里面功能？

我也希望能够做类似 <th><Button /></th> 的事情, 并且有 Button正确呈现( Button 在不同的 jsx 文件中定义并呈现一个按钮，但如果我使用字符串或 toString() ，它会转换为 [Object object] 。

那么，有没有办法在 React 中合成 html 数据？我知道map但我无法让它做我想让它做的事......特别是因为我希望最后一列是 Button所以不是数据的一部分(尽管我想我可以使用 CSS 而不是将其设置为列)。

Answer 1

在 React 中你通常会做这样的事情:

setHtmlHead(data) {
    var html = [];
    for (var property in data) {
        if (data.hasOwnProperty(property)) {
            html.push(<th key={property}>{data[property]}</th>);
        }
    }
    return <tr>{html}</tr>;
}

然后是正文

<thead>{this.setHtmlHead(this.props.data[0])}</thead>

这样您就可以使用实际对象，而不仅仅是写出原始 HTML。如果你想在 th 中放置一个 Button，就把它放在那里。