主页 / 问题 / 616712
Accepted
Skim
Asked:2020-01-19 15:56:21 +0000 UTC2020-01-19 15:56:21 +0000 UTC

如何从 ReactJS 中的另一个文件连接组件？

  • 772

亲爱的 React 专家们！你能告诉我如何正确组织存储在单独文件中的组件的连接和使用吗？在下面的示例中，我需要使用 main.js 文件中的 Header 组件，该组件存储在 components/header.js 文件中

索引.html：

<!DOCTYPE html>
<html lang="ru">
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/css/normalize.css">


  <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure.css">
  <link rel="stylesheet" href="/css/style.css">

  <script src="https://unpkg.com/react@15/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>

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

  <title>Тайтл</title>

</head>
<body>

<div id="layout"></div>

</body>
</html>

/js/组件/header.js：

"use strict";

class Header extends React.Component {
    render() {
        return <header>This is Header</header>;
    }
}

/js/main.js:

'use strict';

import Header from 'components/header';

ReactDOM.render(
    <Header />,
    document.getElementById( 'layout' )
);
javascript

1 个回答

  1. Best Answer

    在你的情况下（你不使用汇编程序），通过脚本标签将文件包含在你的组件中：

    <script src="/js/components/header.js" type="text/babel"></script>
    • 2

相关问题