Javascript 生成用于呈现外部组件的JSX

我对

React

非常陌生，事实上我参加了247次udemy的第23次讲座，学习状态和事件。我很难找到这个问题的答案

我们公司已经决定使用react，到目前为止，它被证明是非常好的。我很犹豫是否要问这个问题，因为我们还没有做到这一点，但我们有extenral JSX是一项业务需求，因为我们需要进行身份验证逻辑，如果无法实现，那么我们就是在浪费时间

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

比如说,

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

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

---

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

不，您不能也不应该尝试通过网络传递UI的JSX表示。原因很简单，JSX不是一种

数据

格式，而是在评估之前传输到JS的Javascript超集。这意味着要做到这一点，您需要传递JS，然后对其进行求值。您可以通过网络传递序列化实体，然后使用为特定实体构建的

React.Component

在客户端上显示它们。在JS中没有标准化的方法来实现这一点（JSON只是JS对象的部分表示）

假设你有某种能输出“JSX”的机器，你会怎么做 真正的输出以及它如何在代码中具体化

假设有一个

页面

组件呈现如下：

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

const Page=（JSX）=>{
返回(
{JSX}
)
}

其中JSX是通过API获得的值，该值如下 你的例子是：

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

这个“JSX”被传输到调用

React.createElement（类型，道具）

这实际上是JS对象。要构建的对象需要访问

type

的值，对于常规

div

元素，该值可以是

字符串
但在任意情况下，最有可能是类或函数
生成的组件（
SomeComponent
）。因此，渲染逻辑需要
要访问这些类或函数，请对它们求值，然后将它们用作
React.createElement
的参数。基本上你是懒惰的加载你的
组成部分

React（某种程度上）是围绕可组合表示原语的思想构建的
（组件）用于显示数据。实际上，这意味着你的应用程序
将为您的数据确定一些（可能很多）可能的表示形式
并以可组合的方式构建它们（react组件）。然后考虑到
用户/应用程序/任何东西生成的数据将使用这些原语和
它们使您的数据可供用户使用的功能。
如果您可以在服务器端用html替换jsx，则可以使用危险的LySetinerHTML属性

你可以像这样使用它

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

constpage=（html）=>{
返回(
)
}

不推荐使用它，因为如果在用户输入时不使用它，用户可以通过这种方式向页面注入恶意代码。但是从api响应来看，我认为这不是一个真正的问题。
AFAIK，从设计的角度来看，react如何工作以及它对JSX的作用，从外部源获得JSX是没有意义的。这是因为JSX只是React之上的一些语法糖，可以让编写它更愉快。所以，理论上你可以不用它。事实上，所有的JSX都是在构建时编译的，然后被推到生产环境中，所以我看不出获取动态JSX有什么帮助。免责声明：我对React是新手，所以不要太认真地接受我的建议：-）我们需要在后端执行业务逻辑，因此我们需要执行外部JSXI。如果不是通过API，而是在本地，您可以使用React代码拆分。我不知道如何使用异步api调用。您不能通过AJax发送React，但您可以通过中的业务逻辑加载脚本。我正在考虑React服务器呈现，我想可能我们问错了问题。最终呈现的HTML更加坚实，因为如果您只想在获取后注入JSX，那么JSX更像是一个未完成的产品。如果我不能使用我的业务逻辑后端，我该如何实现这一点？如何实现序列化实体？@adz5A给出的答案是正确的。您可以使用身份验证逻辑让UI决定是否显示某些内容，您仍然不需要将JSX从后端发送到前端。但是，如果您对提出一种足以满足您需求的安全体系结构感到不舒服，您可能需要了解服务器端渲染。@ZekeDroid您能提供一个例子吗？我更新了我的答案，以提及延迟加载组件。基本上，来回传递JSX就像来回传递
code
一样，这不是一个好的策略。如果您担心初始js捆绑包的大小，那么看看延迟加载，如果是关于重用服务器端逻辑，那么看看服务器端呈现。我不确定ACL是什么，但如果您说的是具有完全不同的html页面（或根节点，以便React呈现），那么是的，这是一种基于后端身份验证方案对用户显示的内容进行安全身份验证的方法。如果您不能使用它，那么将创建JSX而不是HTMLT。但是你可以考虑用普通HTML解决问题，这也会让你打开HTML注入攻击。因此，为什么道具的
部分：）@ZekeDroid不会危险地吹到你的脸上。只有在使用未初始化的用户输入时才是危险的。@PeterAmbruzs你是对的，但在这种情况下
const Page = (html) => {
    return (
        <div dangerouslySetInnerHTML={__html:html}>
        </div>
    )
}