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

我不知道您使用的是哪个版本。

我尝试过这种方法，并为我工作得很好。

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'

未定义按钮标签

2 个答案: