Question

我对React极为陌生，实际上，我参加了247讲课中的第23讲课，以了解他们的情况以及了解状态和事件。我很难找到这个问题的答案。

我们已决定在我们的公司中使用react，到目前为止证明它是非常好的。我很犹豫地问这个问题，因为到目前为止我们还没有得到，但是由于需要有AUTHENTICATON逻辑，所以需要扩展JSX是一项业务需求，如果无法实现，那么我们正在浪费时间。

我的问题是，是否可以从API外部获取JSX并将其呈现在组件内部。

例如，

//外部API通过AJAX请求返回JSX

<div id="app">
  <SomeComponent/>
  <SomeComponent/>
  <SomeComponent/>
</div>

//反应成分

class Baz extends Component {
   render(){
      // fetch JSX from external source through AJAX Request
   }
}

我真正想看到的是使用AJAX和类组件中的render方法的实现。

Answer 1

不，您不能也不应尝试通过导线传递UI的JSX表示形式。原因很简单，JSX并非data格式，而是在被评估之前转译为JS的Javascript的超集。这意味着要执行此操作，您将传递JS，然后进行评估。您可以要做的是通过网络传递序列化的实体，然后使用为特定实体构建的React.Component在客户端上显示它们。 JS中没有标准化的方法来执行此操作（JSON只是JS对象的部分表示）。

假设您有某种可以输出“ JSX”的机器，那会是什么真正输出以及如何在您的代码中实现

假设有一个Page组件呈现如下：

const Page = (JSX) => {
    return (
        <div>
            {JSX}
        </div>
    )
}

其中JSX是您通过API获得的值，该值为您的示例：

<div id="app">
  <SomeComponent/>
  <SomeComponent/>
  <SomeComponent/>
</div>

此“ JSX”被转换为对React.createElement(type, props)的调用所以这实际上是JS对象。这些要构建的对象需要访问 type的值，在常规string元素的情况下可以是div 但在任意情况下很可能是类或函数生成的组件（SomeComponent）。因此，您的渲染逻辑需要可以访问这些类或函数，对其进行评估，然后将其用作 React.createElement的参数。基本上你懒得加载组件。

React是基于可组合表示基元的思想而建立的（组件）用于显示数据。实际上，这意味着您的应用将为您的数据识别一些（可能很多）可能的表示形式并以可组合的方式构建它们（反应组件）。然后给您的用户/应用/所产生的数据，无论使用哪种原始数据，他们的功能，使您的用户可以使用您的数据。

Answer 2

如果您可以在服务器端用html替换jsx，则可以使用危险的SetInnerHTML属性。

您可以像这样使用它。

const Page = (html) => {
    return (
        <div dangerouslySetInnerHTML={__html:html}>
        </div>
    )
}

不建议使用它，因为如果您不加卫生地将其用于用户输入，则用户可以通过这种方式将恶意代码注入页面。但是从api响应来看，我认为这并不是一个真正的问题。

生成JSX以渲染外部组件

2 个答案: