React组件返回原始HTML

Question

我有一个React组件返回一个HTML表格。

调用使用：<Options list={item} />

这是返回表中的功能组件：

const Options = (props) => { 

let table = ` 
<table className="table table-striped table-hover "> 
     <thead> 
      <tr> 
      <th>#</th> 
      <th>Option</th> 
      <th>Votes</th> 
     </tr> 
     </thead> 
     <tbody> 
` 

for (let i = 0; i < props.list.options.length; i++){ 
    table += `<tr> 
    <td>${i+1}</td> 
    <td>${props.list.options[i].option}</td> 
    <td>${props.list.options[i].vote}</td> 
    </tr> 
    ` 
} 

table += `</tbody></table>` 
return table; 
} 

但我在屏幕上看到的是：

怎么来的HTML没有被浏览器渲染？

Answer 1

您正在返回的字符串。你应该这样做

const Options = (props) => { 

    let table = 
     (<table className="table table-striped table-hover "> 
      <thead> 
      <tr> 
       <th>#</th> 
       <th>Option</th> 
       <th>Votes</th> 
      </tr> 
      </thead> 
      <tbody> 
      {props.list.options.map((op, i) => { 
       return (
       <tr key={i}> 
        <td>{i+1}</td> 
        <td>{op.option}</td> 
        <td>{op.vote}</td> 
       </tr> 
       ) 
      })}; 
      </tbody> 
     </table>); 

    return table; 
    } 

Answer 2

如果你使用JSX像下面，它会呈现为HTML：

return <div> {table} </div> 

但我会写这个功能组件为：

const Options = props => { 
    const tableBody = props.list.options.map((obj, i) => (
    <tr key={i}> 
     <td>{i + 1}</td> 
     <td>{obj.option}</td> 
     <td>{obj.vote}</td> 
    </tr> 
)); 

    return (
    <table className="table table-striped table-hover"> 
     <thead> 
     <tr> 
      <th>#</th> 
      <th>Option</th> 
      <th>Votes</th> 
     </tr> 
     </thead> 
     <tbody>{tableBody}</tbody> 
    </table> 
); 
};