时间戳

首页 > 解决方案 > 从 HTML、CSS、JS 转换为 JSX、CSS、JS 时，如何在 react 中链接我的 javascript 文件？

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

问题描述

我有一个使用 HTML、CSS、Javascript 创建的典型网站，我正在尝试将其转换为反应。

我可以很容易地使用在线转换器将我的 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'

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

提前致谢

标签： javascripthtmlcssreactjs

解决方案

你可以在 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';

推荐阅读