Question

x = I love <br /> sports。在用户界面中，我希望体育内容以换行显示。

我正在使用React JSX组件来实现这一目标。

我也尝试剥离开头的单引号和结尾的单引号。

我不想危险地使用SetInnerHTML。

let x = 'I love <br /> sports' 
let y = I love <br /> sports 
render() {

    return (
       <div>
         {x}  ---- Renders as a string with no line breaks.
       </div>

       <div>
         {y}  ---------- Renders sports in a new line.
       </div>

   );

}

Answer 1

使用dangerouslySetInnerHTML可以在JSX中显示HTML标签。这是上述问题的有效解决方案。

class App extends React.Component{
 render(){
  let x = 'I love <br /> sports'; 
// let y = I love <br /> sports ;
  return(
    <div>
    <div dangerouslySetInnerHTML={{
    __html: x
      }} />
</div>
  )
 }
}
ReactDOM.render(<App /> ,document.getElementById('root'))

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

如何在JSX中将嵌入到字符串中的<br/>作为换行符呈现？

1 个答案: