从 HTML、CSS、JS 转换为 JSX、CSS、JS 时，如何在 react 中链接我的 javascript 文件？

Posted 2023-03-05

【中文标题】从 HTML、CSS、JS 转换为 JSX、CSS、JS 时，如何在 react 中链接我的 javascript 文件？

【英文标题】：How do I link my javascript files in react when converting from HTML,CSS,JS into JSX, CSS, JS?

【发布时间】：2021-03-26 03:42:24

【问题描述】：

我有一个使用 html、CSS、javascript 创建的典型网站，我正在尝试将其转换为 react。

我可以很容易地使用在线转换器将我的 HTML 转换为 JSX，而且我的 CSS 是相同的，我只需要以不同的方式导入它。

但现在我对如何链接我的 javascript 文件感到困惑。因为我的 HTML 现在是 JSX，它也在一个 Javascript 文件中。

通常在 html 中，我需要做的就是链接我的 java 脚本并且一切正常：

<script type="text/javascript" src="js/main.js"></script>

我将如何做出反应以使我的 JSX 具有与我的 HTML 相同的功能？

现在我是否尝试从文件位置导入它：

import  './javascript/main.js'

它什么也没做。我没有收到任何错误。我的 JSX 和 CSS 工作正常，我的 CSS 所拥有的只是（这个导入工作正常）：

import  './css/main.css'

如果它应该工作，请告诉我，这一定意味着我必须解决其他地方的错误。

提前致谢

【问题讨论】：

我想这个网站已经有这个类型的问题了。

@shivlalkumavat 谢谢你，你能给我链接吗？我找不到它

请结帐可能对您有帮助medium.com/better-programming/…

这里可以找到答案：***.com/questions/53396307/…

这取决于脚本的作用。它可以是任何东西，从“只需将它放入引导 React 应用程序的 HTML 中”到“完全重写它，以便它以 React 方式做事”

【参考方案1】：

我不认为你可以在 react 应用程序上导入 js 代码，可能你必须先创建 react-app，然后创建它的组件并在这些组件中添加你的 javascript 代码，这很容易，我推荐你阅读 react 的文档，看看它是如何工作的。希望对你有所帮助。

【参考方案2】：

你可以在 JSX 中包含 JavaScript 函数：

import React from 'react';

const Something=()=>

  //  Your javascript functions :

  return(
    <div>
      Your Html here
    </div>
  )


export default Something

//  Or if You are using Class Component :

import React,  Component  from 'react';

class Something extends Component 
  state =   

  // Your Javascript Functions
  
  render()  
    return ( 
      <div>
        Your HTML goes here 
      </div>
     );
  

 
export default Something;

如果你想从另一个位置导入 js 文件，你必须在你的函数中包含导出：

export const Name=()=> 
             

并导入：

import Name from '/location';