Question

我正在尝试创建一个简单的按钮组件。

以下是代码：

{{1}}

我遇到的问题是根本没有按钮显示。控制台显示以下错误：

错误：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。

为什么按钮没有显示？

Answer 1

错误是相对路径..

//buttons.js

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

class Button extends React.Component {

  render() {
    const {children, className, href, icon} = this.props;
    const props = {href, className, ref: 'button', disabled: this.props.disabled };
    const element = href ? 'a' : 'button';

    return React.createElement(
      element, props, icon ? <i className={this.props.icon} /> : null, children
    );
  }
}

//index.js

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

import Button from '../components/buttons';
//-----------------^^^^--------------here
ReactDOM.render(
  <div>
    <Button className="btn-primary">click me</Button>
    <Button className="btn-success" icon="fa fa-phone">success </Button>
    <Button className="btn-success" disabled={true}>disabled </Button>
  </div>, 
  document.getElementById('root')
);

//index.html 

<!doctype html>
<html>
  <head>

    <title></title>

  </head>
  <body>

        <div id='root'></div>

    <script src="/bundle.js"></script>
  </body>
</html>

Answer 2

我认为问题在于这一行：<script src="/bundle.js"></script> 您使用了额外的/，删除它应该可以，因为相同的代码在jsfiddle上正常运行。

https://jsfiddle.net/5469dwwc/

Javascript Reactjs按钮组件未显示

2 个答案: