代码之家 › 专栏 › 技术社区 › simon

如何创建同一文件JS的两个组件wihtin?[副本]

reactjs javascript

simon · 技术社区 · 6 年前

这个问题已经有了答案:

How do I render sibling elements without wrapping them in a parent tag? 7个答案

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

好的,这里我尝试创建两个compoents,接下来我尝试从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中寻找解决方案,我只看到了这一点,但不是解决我的问题的方法: this

我开始对JS做出反应 this tutorial

1 回复 | 直到 6 年前

Tholle 6 年前

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