如何在 HTML 文件 (react.js) 中的父组件中导入子组件

Question

我的 EJS 文件（呈现为 HTML）：

<!DOCTYPE html>
<html lang="en" class="no-js">
  <body>
    <div id="choose-your-box"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script>
      const merged_boxes = <%-JSON.stringify(merged_boxes)%>;
    </script>

    <script type="text/babel" src="/react/boxes.js"></script>
  </body>
</html>

box.js

class Boxes extends React.Component {
  render() {
    return <Box/>; <--- HERE, how do I properly import the box.js file?
  }
}

const domContainer = document.querySelector("#choose-your-box");
ReactDOM.render(<Boxes />, domContainer);

盒子.js

class Box extends React.Component {
  render() {
    return <div></div>;
  }
}

export default Box;

那么如何在 box.js 中导入 box.js 呢？ 显然我省略了很多代码以使其看起来更干净，所以如果有人有任何问题，请告诉我。

Answer 1

您首先必须在 Boxes 文件中导入Box组件。

Answer 2

尝试在 Boxes.js 上方添加Box.js脚本标记， Boxes.js所示：

<script type="text/babel" src="/PATH_TO_BOXJS/box.js"></script>
<script type="text/babel" src="/react/boxes.js"></script>

然后使用它without不像这样导入：

class Boxes extends React.Component {
  render() {
    return <Box/>; {/*<--- It should be fine this time*/}
  }
}

const domContainer = document.querySelector("#choose-your-box");
ReactDOM.render(<Boxes />, domContainer);

您还可以从box.js中删除export phrase ，因为您不需要它。

box.js ：

class Box extends React.Component {
  render() {
    return <div></div>;
  }
}

如何在 HTML 文件 (react.js) 中的父组件中导入子组件

问题描述

2 个解决方案

解决方案1
0 2020-06-10 13:44:13

解决方案2
0 已采纳 2020-06-10 13:45:21

如何在 HTML 文件 (react.js) 中的父组件中导入子组件

问题描述

2 个解决方案

解决方案1 0 2020-06-10 13:44:13

解决方案2 0 已采纳 2020-06-10 13:45:21

解决方案1
0 2020-06-10 13:44:13

解决方案2
0 已采纳 2020-06-10 13:45:21