Question

我有一个React组件：

class Control extends React.Component {
  constructor(props) {
    super(props);
    this.handleSaveFile = this.handleSaveFile.bind(this);
    this.handleExecFile = this.handleExecFile.bind(this);
  }

  handleSaveFile(e) {
    ...
  }

  handleExecFile(e) {
    ...
  }

  render() {
    return (
      <div id={this.props.name} className="Control" >
        <button onClick={this.handleSaveFile}>Save</button>
        <button onClick={this.handleExecFile}>Exec</button>
      </div>
    )
  }
}

使用npm run build构建项目后，应用程序正确显示，但“控件”组件HTML已缩减为：

<div id="control" class="Control">
    <button>Save</button>
    <button>Exec</button>
</div>

换句话说，好像“onClick”已被优化掉了。

我不确定为什么会这样？

我是React.js的新手，我是前端开发的新手，感谢任何帮助。

Answer 1

使用该应用程序后，我会看到发生了什么。

确实没有＆＃34; onClick＆＃34;在React组件的HTML中呈现，但该组件确实响应了点击。 onClick只是由框架以不同的方式注册。

Answer 2

我们构建工具的正确行为。检查您的JavaScript文件。您的处理程序放在javascript包中。

在npm运行构建之后，React组件的onClick未呈现

2 个答案: