React - 如何 return 和 HTML 的字符串

Question

我想我是守旧的，构建 HTML 和数据的字符串。当我 return 字符串时，期待 React 能很好地处理这个问题。有明显的方法吗？ <br> 似乎在任何地方都不起作用。有替代品吗？
（下图：剪切并粘贴到一个 .html 文件中，它将运行。）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div id="root"></div>

<script type="text/babel">

var SportsPeople = [
  {thegame: 'Football', name: 'Tom Brady' },
  {thegame: 'Basketball',   name: 'Le Bron James' }
]

class Banner extends React.Component {
constructor(props) { super(props); };
render() {  return (  <div>Big Banner on the Top</div>);  }
}

class AnotherLine extends React.Component {
constructor(props) { super(props); };
render()   {  

let htmlStuff = "";
let workTable = this.props.stars;

for (let i = 0; i < workTable.length; i++)
{

    htmlStuff +=  workTable[i].thegame;
    htmlStuff +=   "<p> - </p>";
    htmlStuff +=  workTable[i].name;
    htmlStuff +=   "<br>";  
}


console.log ( { htmlStuff } );

return  (  <div> { htmlStuff }  </div> );  

}  // End render

} // End CLASS

//==============================

class Main extends React.Component {
constructor(props) { super(props);   };

render() {
    return (
      <div>
    <Banner  />
    <AnotherLine 
        stars = { SportsPeople } 
     />
      </div>);

  }
}

//  =========================================

ReactDOM.render(
  <Main />,
    document.getElementById('root')
);

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
</body>
</html>

Answer 1

也许尝试在你的 AnotherLine 组件中使用 dangerouslySetInnerHtml 属性，如下所示：

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

请参阅此处的文档以获得更好的解释： https://facebook.github.io/react/docs/dom-elements.html

React - 如何 return 和 HTML 的字符串

React - How to return and string of HTML

javascript

ecmascript-6

reactjs