在同一页面中添加两个导出反应 - JavaScript

在JavaScript中，我们可以使用React框架来创建界面，并可以使用导出反应来对用户交互作出响应。当我们需要在同一页面中添加两个导出反应时，可以使用以下步骤实现。

步骤1：导入React和ReactDOM库

我们需要在HTML页面中导入React和ReactDOM库。在HTML页面中添加以下代码。

<!-- 导入React和ReactDOM -->
<script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>

步骤2：创建React组件

我们要在React组件中创建需要的2个导出反应。在这里我们要创建一个叫做"MyComponent"的组件。在React组件中添加以下代码。

// 创建MyComponent组件
class MyComponent extends React.Component {
  // 构造函数
  constructor(props) {
    super(props);
    // 设置组件状态
    this.state = {
      count1: 0,
      count2: 0
    };
  }
  
  // 处理点击按钮事件
  handleClick1 = () => {
    this.setState({
      count1: this.state.count1 + 1
    });
  }
  
  // 处理点击按钮事件
  handleClick2 = () => {
    this.setState({
      count2: this.state.count2 + 1
    });
  }
  
  // 渲染组件
  render() {
    return (
      <div>
        <h1>My Component</h1>
        <button onClick={this.handleClick1}>Click Me 1 ({this.state.count1})</button>
        <button onClick={this.handleClick2}>Click Me 2 ({this.state.count2})</button>
      </div>
    );
  }
}

// 渲染MyComponent组件到页面中
ReactDOM.render(<MyComponent />, document.getElementById("root"));

上述代码中，我们创建了一个叫做"MyComponent"的组件，它包含了两个按钮和两个状态变量，当我们点击按钮时，状态变量会发生改变。

步骤3：在HTML页面中创建容器

我们需要在HTML页面中创建一个容器来渲染"MyComponent"组件。

<!-- 创建一个容器 -->
<div id="root"></div>

步骤4：运行脚本

我们需要将上述代码保存为一个js文件，并将其链接到HTML页面中。

<!-- 链接JavaScript脚本 -->
<script src="my-component.js"></script>

现在，我们可以运行HTML页面，并可以在同一页面中添加两个导出反应了。

结束语

以上是在JavaScript中，在同一页面中添加两个导出反应的实现步骤。这个例子可能有点简单，但是可以帮助学习React框架的基础知识。