Question

我从API

获取说明

description = '<p>Book gor 4 hair cut and get 1 hair cut free validity is ONE year&nbsp;</p>'

现在我试图在HTML中呈现相同的内容

<div>
     {parser.parseFromString(description,"text/html").querySelector('body').innerHTML}
</div>

但它不像html一样渲染。 check my fiddle demo。预期的输出应该像html标记行为一样呈现。

Answer 1

嗯，你可以使用dangerouslySetInnerHTML，但它不仅仅是为了好玩而被称为“危险”......

<div>
    dangerouslySetInnerHTML={{__html:
        parser
            .parseFromString(description,"text/html")
            .querySelector('body')
            .innerHTML
    }}
</div>

Answer 2

你也应该能够使用Jquery

$('.description').html('<p>Book gor 4 hair cut and get 1 hair cut free validity is ONE 
            year&nbsp;</p>')

https://oscarotero.com/jquery/

我编辑了这个包括解析响应主体。将它附加到状态并在jsx中渲染state.description使它更具动态性。你也可以使用调用api的函数返回解析后的响应体并在你的div中调用它而不是使用state。 <div>{this.getDescription()}</div>。在最坏的情况下，您可能必须拆分描述以删除p标记并在正文中进行渲染。例如：description = res.body.split('<p>').join().split('</p>').join()，然后在我的示例中处理它的任何一种方式。如果删除p标签，可以使用jquery设置文本：$('.description').text(description)

constructor(props) {
        super(props)
        this.state = {
            description: '<p>Book gor 4 hair cut and get 1 hair cut free validity is ONE 
            year&nbsp;</p>'
        }
        this.getDescription = this.getDescription.bind(this)
    }

        getDescription() {
            apiCall().then(res => {
                this.setState({ description : JSON.parse(res.body)})
            })
        }

        render () {
            return (
                <div className="description">
                {this.state.description}
           </div>
            )
        }
    }

Answer 3

大多数方法似乎都很复杂。我选择的方法是将整个函数作为JSX元素返回。例如：

renderJSXElement(): JSX.Element{
   return (Enter html string here)
}

你可以将它作为道具传递给你的js渲染，它应该可以工作。

Answer 4

尝试这样：

class Hello extends React.Component {
  render() {
    let description = '<p>Book gor 4 hair cut and get 1 hair cut free validity is ONE year&nbsp;</p>';
    return (<div>
              <span dangerouslySetInnerHTML={{__html:description}} />
            </div>)
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

在React js中将字符串转换为HTML代码

4 个答案: