一个网站可以同时使用简单的 JavaScript 和 React

Posted 2023-03-14

【中文标题】一个网站可以同时使用简单的 JavaScript 和 React

【英文标题】：Can a website work with both simple JavaScript and React

【发布时间】：2019-03-29 14:08:07

【问题描述】：

我有一个网站设计，其中包含没有任何框架的 javascript。现在我正处于开发过程中，我需要使用 javascript 框架，例如对特定过程做出反应。那么，它会起作用还是我需要将所有东西都转换成一个框架？我正在使用 Laravel，如何在 Laravel 框架内为单个网站制作多个 React 应用程序？

【参考方案1】：

是的。这正是 Facebook 通过创建 React 旨在解决的问题。他们最初只将 React 用于部分评论系统和聊天。

您可以创建一个 React 组件并仅在您网站的一部分中使用它。您只需要为它提供一个安装位置。也就是说，您要在其中安装应用程序的 div。

查看documentation for React DOM 和integration guide 了解有关渲染到DOM 的更多信息。基本思想是创建您的组件，然后使用以下代码呈现它：

ReactDOM.render(element, container[, callback])

【讨论】：

嘿，谢谢你的帮助......我已经成功地让它工作了。但是 react 组件中的 html 没有使用来自 laravel public 的 css。你能帮我让它工作吗？ CSS 是由另一个人完成的，我希望每个组件都使用 laravel 的公共文件夹中的相同 CSS。

我建议提出一个新问题，而不是在 cmets 中提出第二个问题。您将获得更多曝光，这将增加其他读者通过 google 找到您的问题的价值。祝你有美好的一天@sushanshrestha！

【参考方案2】：

来自 React 文档：

React 可以在任何 Web 应用程序中使用。它可以嵌入到其他应用程序中，并且稍加注意，其他应用程序也可以嵌入到 React 中。

要将 React 与其他库或框架集成，请查看 React 集成指南：https://reactjs.org/docs/integrating-with-other-libraries.html

【讨论】：

嘿，谢谢你的帮助......我已经成功地让它工作了。但是 react 组件中的 html 没有使用来自 laravel public 的 css。你能帮我让它工作吗？ CSS 是由另一个人完成的，我希望每个组件都使用 laravel 的公共文件夹中的相同 CSS。

【参考方案3】：

是的，您可以从 react 库创建全局窗口渲染器函数，并从 vanilla js 或其他第三方库（如 jquery）调用它。您只需要包含缩小的 js 即可调用该函数。

一些类似下面的反应

const app = (parameter1,parameter2) => (
          <YourComponent parameter1=parameter1 parameter2=parameter2/>
);





window.renderYourComponent = function (p1, p2) 
    render(app(p1,p2), document.getElementById('your_div'));

在你的原版 js 上

 <script type="text/javascript" src="your_minified_react.js"></script>
 <div id='your_div'></div> 
 window.renderYourComponent("p1","p2");

所有内容都将在 'your_div' 中呈现，您可以单独处理 react

【讨论】：

嘿，谢谢你的帮助......我已经成功地让它工作了。但是 react 组件中的 html 没有使用来自 laravel public 的 css。你能帮我让它工作吗？ CSS 是由另一个人完成的，我希望每个组件都使用 laravel 的公共文件夹中的相同 CSS。

【参考方案4】：

是的，您可以在 Laravel 框架内为单个网站制作多个 React 应用程序。 Laravel 的前端 UI 经常使用刀片模板。 您需要做的是构建 React 应用程序并将构建的 React 应用程序与 Laravel 刀片集成。 例如，您可以将 React 应用程序的整个构建内容复制到 Laravel 主页刀片中。 另外，在 React 内部导入自定义的 Javascript 文件，你可以使用脚本标签和 webpack 复制模块等多种方式。