时间戳

首页 > 解决方案 > 如何在同一个文件js中创建两个组件？

javascript - 如何在同一个文件js中创建两个组件？

问题描述

我正在尝试在同一个文件 JS 中创建 ReactJS 的两个组件。

我有两个组件，分别称为“欢迎”和“再见”

 class Welcome extends React.Component {
    render() {
        return <h1>Hello {this.props.message}!</h1>;
    }
}
 class GoogBye extends React.Component {
    render() {
        return <h1>GooyBye  {this.props.message}!</h1>;
    }
}

好的，我在这里尝试创建两个组件，接下来我尝试从 ReactDOM.render 调用这种方式：

 ReactDOM.render(
    <Welcome message="my friend" />,
   <GoodBye message="see you later" />,
    document.getElementById("root")
  
);

我正在尝试创建两个组件，接下来我调用这两个组件

完整代码：

<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
 class Welcome extends React.Component {
    render() {
        return <h1>Hello {this.props.message}!</h1>;
    }
}
 class GoogBye extends React.Component {
    render() {
        return <h1>GooyBye  {this.props.message}!</h1>;
    }
}

      
 ReactDOM.render(
    <Welcome message="my friend" />,
   <GoodBye message="see you later" />,
    document.getElementById("root")
  
);
      
    </script>
</body>
</html>

在我创建这个问题之前，我在 stackoverflow 中寻找一个解决方案，我只看到了这个，但不是我的问题的解决方案： 这个

我从本教程开始使用 React JS

标签： javascriptreactjs

解决方案

您还需要加载该react-dom库，并且ReactDOM.render只能渲染一个元素，因此您需要包装您的组件。

例子

class Welcome extends React.Component {
  render() {
    return <h1>Hello {this.props.message}!</h1>;
  }
}
class GoodBye extends React.Component {
  render() {
    return <h1>GoodBye {this.props.message}!</h1>;
  }
}
ReactDOM.render(
  <div>
    <Welcome message="my friend" />,
    <GoodBye message="see you later" />
  </div>,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

推荐阅读