Question

我想将数据库中的内容显示在react组件中。内容可以是字符串或html，我知道React并不喜欢html注入...

我写了一个模块，但它没有按我的意愿工作

import $ from "jquery";
import React from 'react'

export default React.createClass({

  getInitialState() {
    return { content: [] };
  },

  componentDidMount: function() {

    if (this.state.content.length == 0) {
      $.get('/content', function(data) {
        this.setState({
          content: data
        })
      }.bind(this))
    }

  },

  getValue() {

    for (let i = 0; i < this.state.content.length; i++) {
      if (this.state.content[i].key == this.props.contentKey) {
        return this.data[i].value;
      }
    }

    return this.props.contentKey;
  },

  render() {
    return (<span>{this.getValue()}</span>)
  }
})

这个会将<Content contentKey="key"/>转换为<span>value</span>

我想要例如

render() {
    return (
        <div>
            {content('key1')}
            <img src={content('key2')} />
        </div>
    )
}

假设我的服务器返回

{"key1": "<p>I am key 1 value</p>", "key2": "key2Value.jpg"}

结果应该是

<div>
    <p>I am key 1 value</p>
    <img src="key2Value.jpg" />
</div>

我不希望html被转义

Answer 1

如果要创建一个类方法，如下所示：

renderEls() {
  return this.state.content.map(function(el) {
    return (<div>
      <p>{el.key1}</p>
      <img src={el.key2} />
    </div>) 
  });
}

然后，在组件的渲染方法中，您需要执行以下操作：

render() {
  return <div>{this.renderEls()}</div>
}

此外，如果您要使用React，通常最好将所有内容拆分为各自独立的组件。

在您的情况下，创建一个新的组件可能并不是一个坏主意，您将为从服务器返回的每个对象进行渲染，并将值作为props传递。

要从字符串呈现HTML，React为您提供了一种方法，如下所述：https://facebook.github.io/react/tips/dangerously-set-inner-html.html

希望有所帮助！

Answer 2

您可以使用XHR而不是jquery。

var xhr = new XMLHttpRequest()
xhr.open("GET", './a.json', true)

带回调

xhr.onloadend()

但你需要

dangerouslySetInnerHTML={{ __html: content}}

注入动态内容的反应

2 个答案: