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;
  }

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>
  );
};

Answer 3

您的函数返回一个字符串。字符串是有效的React元素，但它们呈现为textNodes。出于安全/语义原因，您的浏览器永远不会将显式文本的节点解释为html。对于React来渲染DOM节点，Element必须是更高级别的类型。

其他答案为您提供了一种转换代码以获得所需行为的方法，但我认为我可以添加一些上下文来解释代码的行为方式。

Answer 4

如果有人愿意，您可以将HTML字符串解释为dom元素，如下例所示

BaseViewController

// Get a hook function
const {useState} = React;

const Example = ({title}) => {
  const [string, setString] = useState('<div><table><tr><th>head 1</th><th>head 2</th><th>head 3</th></tr><tr><td>data 1</td><td>data 2</td><td>data 3</td></tr><tr><td>data 4</td><td>data 5</td><td>data 6</td></tr></table></div>');
  
  

  return (
    <div dangerouslySetInnerHTML={{ __html: string}} />
  );
};

// Render it
ReactDOM.render(
  <Example title="Example using Hooks:" />,
  document.getElementById("react")
);

React组件返回原始HTML

4 个答案: