未定义按钮标签

Question

我正在尝试在 React js 中创建一个按钮。我正在使用 WebStorm。当我添加下面发布的代码并运行它时，我得到下面发布的错误。

请告诉我如何解决它。

代码:

var React = require('react');

var buttonStyle = {
margin: '10px 10px 10px 0'
};

var Button = React.createClass({
render: function () {
    return (
        <button
            className="btn btn-default"
            style={buttonStyle}
            onClick={this.props.handleClick}>{this.props.label}</button>
    );
}
});

错误:

          <button
        ^
SyntaxError: Unexpected token <
at new Script (vm.js:74:7)
at createScript (vm.js:246:10)
at Object.runInThisContext (vm.js:298:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:266:19)

Answer 1

不知道你用的是哪个react版本

我这样试过，效果很好。

import createReactClass from  'create-react-class';

var Button = createReactClass({
   handleClick: function() {
      console.log("hello world");
  },
  render: function () {
    return (
      <button
        className="btn btn-default"
        style={buttonStyle}
        onClick={this.handleClick}>{'Button'}</button>
    );
  }
});

工作 codesandbox

Answer 2

如果您想在其他地方使用此按钮，最佳做法是将其导出为默认值，然后将其导入您要使用的位置。

import React from 'react';

var buttonStyle = {
margin: '10px 10px 10px 0'
};

var Button = React.createClass({
  render() {
      return (
          <button
              className="btn btn-default"
              style={buttonStyle}
              onClick={this.props.handleClick}>{this.props.label}</button>
      );
  }
});
export default Button;

下次要使用它时，将其作为模块导入：

import Button from 'pathToComponent/Button'

未定义按钮标签

Button tag is not defined

webstorm

reactjs

react-native