在 reactjs 中合成 html 代码

Question

我目前正在尝试从 React 中的数据呈现 table，我有这个：

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，但我无法弄清楚。

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

我还希望能够执行类似 <th><Button /></th> 的操作，并让 Button 正确呈现（Button 在不同的 jsx 文件中定义并呈现一个按钮，但是如果我使用字符串或 toString()，它会转换为 [Object object].

那么，有没有办法在 React 中组合 html-data？我知道 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 就把它放在那里。

在 reactjs 中合成 html 代码

Compositing html code in reactjs

html

javascript

rendering

reactjs