如何创建同一个文件js的两个组件？

Question

我尝试在同一个文件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

Answer 1

您还需要加载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>