'Button'未定义react / jsx-no-undef react.js

Question

我是React.js中的菜鸟，只是搞乱了组件和事件监听器，我试图将eventlistener添加到按钮但是由于某种原因它不起作用...我试图导入元素但是这只是给了一堆其他错误，请somone请告诉我如何让这个工作？感谢

import React from 'react'; 
import ReactDOM from 'react-dom';



class Passiing extends React.Component {
  scream() {
    alert('you passed!');
  }

  render() {
    return <Button onClick={this.scream}>Did you pass?</Button>;
  }
}

ReactDOM.render(<Button />, document.getElementById('app'));



export default Passiing; 

Answer 1

您需要使用react-bootstrap导入Button。

从＆＃39; react-bootstrap＆＃39;;

导入{Button}

为了显示样式，请安装bootstrap和 import＆＃39; bootstrap / dist / css / bootstrap.css＆＃39;并将其添加到index.js

中

使用按钮，

提交

Answer 2

问题完全如错误中所述。您正在使用未在任何地方定义的(JSON file)组件。您需要定义Button类或从某处导入Button（例如UI库）。

Answer 3

您可以将HTML5 <button>标签用作按钮。如果您在React中使用大写字母作为标签，则假定该标签是组件而不是“常规”标签。

Answer 4

您是否尝试使用react-bootstrap？如果是这样，添加此导入： import { Button } from 'react-bootstrap'，如果尚未安装，请运行以下命令：

$ npm install --save react react-dom
$ npm install --save react-bootstrap

如果您无意使用它，您必须自己创建一个名为Button的组件并将其导入。

Answer 5

您的代码应该是这样的。

import React from 'react'; 
import ReactDOM from 'react-dom';



class Passiing extends React.Component {
  constructor(props) {
    super(props)
    this.scream = this.scream.bind(this);
  }
  scream() {
    alert('you passed!');
  }

  render() {
    return (
      <input type='button' value="button" onClick={this.scream} />
    );
  }
}

ReactDOM.render(<Passiing/>, document.getElementById('app'));



export default Passiing;