0
私は反応で単純なボタンコンポーネントを作成しようとしています。ここでJavascript Reactjsボタンコンポーネントが表示されない
は、コードは次のとおりです。
//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';
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>
私が午前問題は何のボタンがまったく表示されないことです。 コンソールに次のエラーが表示されています。
エラー：要素タイプが無効です：組み込みコンポーネント用の文字列または複合/コンポーネント用のクラス/関数（got：オブジェクト）が必要です。
なぜボタンが表示されないのですか？ <script src="/bundle.js"></script> あなたは余分な/を使用し、同じコードがjsfiddle上で正常に動作しているので、それが動作するはずです、これを削除します。
あなたはbuttons.js' 'で' Button'を輸出していないようです。これはtyp typoですか、まさにあなたのコードにありますか？ –