javascript - 注入(inject)动态内容 react

Question

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

我写了一个模块，但它没有按我想要的方式工作

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，通常最好将所有内容拆分到它们自己的独立组件中。

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

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

希望对您有所帮助!