javascript - React component returning raw HTML - Stack Overflow

admin管理员组

文章数量:1336631

I have a React ponent that returns a HTML table.

Invoked using: <Options list={item} />

This is the functional ponent that returns the table:

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

But what I see on screen is:

How e the HTML is not being rendered by the browser?

I have a React ponent that returns a HTML table.

Invoked using: <Options list={item} />

This is the functional ponent that returns the table:

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

But what I see on screen is:

How e the HTML is not being rendered by the browser?

• javascript
• reactjs
• jsx

Share Improve this question Follow edited Oct 7, 2017 at 17:53 Arup Rakshit 118k3030 gold badges267267 silver badges325325 bronze badges asked Oct 7, 2017 at 17:33 MusaMusa 59322 gold badges77 silver badges2121 bronze badges 2

• 1 It's because you are actually returning a string. – Paul Manta Commented Oct 7, 2017 at 17:38
• I'd encourage you to learn about JSX, and the difference to a string of HTML, which is what you are using as of now. – Fabian Schultz Commented Oct 7, 2017 at 17:40

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You are returning string. You should do it like this

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

Your function is returning a string. Strings are valid React Elements, but they are rendered as textNodes. For security/semantic reasons, your browser will never interpret nodes that are explicitly text as html. For React to render DOM nodes, the Element must be of a higher level type.

The other answers give you a way to convert your code to have the behaviour you wanted, but I thought I could add some context around why your code is acting the way it is.

If you use JSX like below, it will render as HTML:

return <div> {table} </div>

But I would write this functional ponent as:

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

If anyone wanted, you can interpret HTML string as a dom element like below example

// 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")
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

本文标签： javascriptReact component returning raw HTMLStack Overflow