React渲染从后台传过来的数据

使用dangerouslySetInnerHTML

使用dangerouslySetInnerHTML，如果后台文本中存在换行，将换行符（\r\n 或者 \n）替换成'<br />'。使用dangerouslySetInnerHTML 固定宽度可以自动撑开p标签的高度。

<p dangerouslySetInnerHTML = {{ __html:this.state.activeInfo.activityReward.replace(/\r\n/g,'<br />') }}></p>

使用 Textarea 标签

textarea标签接收后台数据会自动加载后台数据样式，不需要替换\r\n 或者 \n

<textarea onClick={() => this.onTapEvent(event)} id="reward-text" disabled={true} style={{
                                    width: '100%',
                                    overflow: 'auto',
                                    wordBreak: 'break-all',
                                    color: '#000000',
                                    fontSize: '0.6rem',
                                    fontWeight: '300',
                                    border:'none',
                                    bodyStyle:'solid',
                                    borderColor:'#fff'
                                }} value={this.state.activeInfo.activityReward} readOnly></textarea>

textarea 不会随内容文本的高度而自适应高度，所以需要如下方法：

 autoSize() {
        let textarea1 = document.getElementById('reward-text');
        textarea1.style.height = (textarea1.scrollHeight + 10) + 'px';
 }

componentDidUpdate() {
        this.autoSize();
}