ReactJS：创建组件，不对非React库使用render

Question

您可以使用React从Ajax调用返回的数据创建路由器链接（或其他组件）吗？不使用呈现函数。

背景：我们有一个大型的第三方非React javascript库，它可以从AJAX调用中动态呈现HTML。我们控制输入（即ajax-response)，但不控制输出。我想输入链接（一个href)，并将它们呈现为React路由器链接。为了包装非React组件，我创建了一个组件，它基本上有两个部分：componentDidMount，我在这里初始化组件；render，我在这里输出一个div（用于第三方javascript库）。理想情况下，我们希望直接从Ajax-Response注入reactJS组件：

[{'textToRender': '<Link to="/home" title="home">home</Link>'}]

不幸的是，这只会呈现文本：

<Link to="/home" title="home">home</Link>

你知道这是否可能吗？

Update：非react组件有点复杂，但为了解决这个问题，让我们假设它接受一个ajax-url参数，并将输出呈现给该div。nonreact组件需要来自AJAX的HTML输入，但是我能够在将HTML注入该组件之前执行javascript。

即。非react组件从AJAX调用中获取数据并更新其div。

因此init如下所示：

componentDidMount() {
  $('#nonreact').NonReact({ 'ajax': 'http://someurl..', 'transform' : function(data) { //here I can run some JS-code prior to nonrect render; return data; } });
}

组件呈现如下所示：

render() {
  return (
   <div id="nonreact"></div>
  )
}

Answer 1

您可以这样做：

componentDidMount() {
    $('#nonreact').NonReact({
        ajax: 'http://someurl..',
        transform: (data) => {
            // 1. transform data to some intermediate format
            // {to: '/home', title: 'home', text: 'home'}
            const {text, ...props} = transform(data);

            // 2. create React element and set it to `link` state
            this.setState({
                link: React.createElement(Link, props, text);
            });
        }
    });
}
render() {
    // 3. Use {this.state.link} here
    ...
}