javascript - React 组件返回原始 HTML

Question

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

调用方式:<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;
  }