合成的html代码

目前我正在试图从在阵营数据呈现一个表，我有这样的：（？希望）合成的html代码

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来取代它，而不是使其成为一列）

来源

2016-11-26 adinutzyc21

我强烈建议您阅读本文：https：//facebook.github.io/react/docs/thinking-in-react.html –

在阵营，你通常会做这样的事情：

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就放在那里。

来源

2016-11-26 19:32:27

合成的html代码

回答

相关问题