ReactJS：创建组件，而不是使用渲染非反应库

Question

你可以使用React从ajax-calls返回的数据创建路由器链接（或其他组件）吗？ 不使用渲染功能。

背景：我们有一个大型的第三方非反应式JavaScript库，它可以动态地从AJAX调用中呈现HTML。 我们控制输入（即ajax响应），但不控制输出。 我想输入链接（一个href）并将它们呈现为React Router Links。 为了包装非反应组件，我创建了一个组件，它基本上有两个部分： componentDidMount ，我启动组件， 渲染我输出div的地方（对于第三方javascript库）。 理想情况下，我们希望直接从ajax-response注入reactJS组件：

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

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

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

知道这是否可行？

更新 ：非反应组件有点复杂但是为了这个问题，让我们说它需要一个ajax-url参数并将输出呈现给该div。 非反应组件需要来自AJAX的HTML输入，但我能够在将HTML注入该组件之前执行javascript。

即非反应组件从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

在React中， <Link to="/home" title="home">home</Link>只是糖

React.createElement(
  Link,
  { to: "/home", title: "home" },
  "home"
);

它会在您的代码执行之前转换为它。 简单地放置文本 <Link to="/home" title="home">home</Link>将不会做任何特别的事情。

如果反应更像，你可能会让你的生活更轻松

[{'textToRender': {to: "/home" title: "home" text: "home }}]

然后，在实际呈现这些内容的组件中，您将迭代这些并在render为其创建链接

render: function() {
  var linksResponse = ... // how ever you get them
  var elements = linkResponses.map(function(entry) {
    return Object.keys(entry).map(function(text) {
      var linkData = entry[text];

      // real action happens here
      var link = <Link to={linkData.to} title={linkData.title}>{linkData.text}</Link>;
      return link;
    });
  });
  return elements;
}

Answer 2

这绝对是可能的。 在我目前的项目中，我从API中获取了大量标记。 这是普通的HTML，其中包含一些自定义标记。 这些自定义标记在我的应用中具有相应的React组件。 你想要的是让我们成为一个像html-to-react（ https://github.com/mikenikles/html-to-react ）这样的库。 这种方式的工作方式是它解析标记字符串并创建一个表示该标记的DOM的对象。 该对象又呈现为React元素。 你可以拥有自定义标记处理程序，告诉html在标记中找到非标准标记时做出反应。

它的工作原理如下：

let markupstring = '<div>lots of markup, 100kb</div>' // String
let parsedMarkup = htmlparser.parseWithInstructions(markupstring, function(){return true;}, processingInstructions);

如何配置prosessingInstructions记录在html-to-react文档中。 parsedMarkup是一个有效的React元素。

Answer 3

你可以这样做：

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