ReactJS:创建组件，不使用渲染非 react 库

Question

您可以使用 React 从 ajax 调用返回的数据创建路由器链接(或其他组件)吗？不使用渲染函数。

背景:我们有一个大型的第 3 方非 React javascript 库，可以通过 AJAX 调用动态呈现 HTML。我们控制输入(即 ajax 响应)，但不控制输出。我想输入链接(a href)并将它们呈现为 React Router Links。为了包装非 react 组件，我创建了一个组件，它基本上有两个部分:componentDidMount，我在其中启动组件，render，我在其中输出一个 div(用于第 3 方) JavaScript 库)。理想情况下，我们希望直接从 ajax-response 注入(inject)reactJS组件:

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

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

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

知道这是否可能吗？

更新:非 React 组件有些复杂，但为了解决这个问题，我们假设它需要一个 ajax-url 参数并将输出呈现到该 div。 nonreact 组件需要来自 AJAX 的 HTML 输入，但我能够在将 HTML 注入(inject)该组件之前执行 javascript。

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

所以初始化看起来像这样:

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
    ...
}