javascript - Reactjs 使用动态文本值渲染 JSX

Question

我正在使用 ReactJS，但我遇到了以下无法找到解决方案的问题:

在渲染之前，我想用任何会强制换行的东西替换两个单词之间的空格。到目前为止，我尝试的一切都不起作用。我已经阅读了 React 文档，它可能暗示我正在处理一个 ' JSX Gotchas '

let strReturn = "\u000A";//<br/>//\u000D

// for example this.props.label could have a value of "Big Bid"

//  now remove space between 'Big Bid' and replace with <br/>
let str = this.props.label.replace(/ /, strReturn );

return <div className={this.props.className}>{str}</div>

目前在屏幕上呈现的内容包括 say Big <br/> 的文本出价。

如果有任何 ReactJS 专家可以告诉我处理这个问题的最佳方法，我将不胜感激。

非常感谢。

Answer 1

有几种方法可以解决这个问题

1. 使用 dangerouslySetInnerHTML

    let str = this.props.label.replace(/ /, '<br>');
    return <div dangerouslySetInnerHTML={ { __html: str} } />;
   

   Example

2. 拆分字符串，然后将每一行包装到标签中，例如<p>

    let text = this.props.label.split(/ /).map((text, index) => {
      return <p key={ index }>{ text }</p>
    });
   
   <div>
     { text }
   </div>;
   

   Example