0

そのため、test.jsx ファイルを再処理しましたが、隆起したボタンをレンダリングする代わりに、``(ページの上部にある 2 つの引用符) が表示されます。Console.log にエラーが表示されないため、ここからどこに移動すればよいかわかりません。

索引.html

    <!DOCTYPE HTML>
<html lang = "en">
<head>
  <title>A Simple HTML Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>``
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
  <h2>HTML is Easy To Learn</h2>
  <p>Welcome to the world of the 
  World Wide Web.
  This is the first paragraph. 
  While short it is still a paragraph!
  </p>
  <div id='main'></div>
  <script script"build/test.js"></script>
  <p>And this is the second paragraph.
  </p>
</body>
</html>

test.jsx

    var RaisedButton = require('./RaisedButton.jsx');

React.render(<RaisedButton />, 
    document.getElementById('main'));

raiseButton.jsx

var RaisedButton = React.createClass({

  childContextTypes: {
    muiTheme: React.PropTypes.object
  },

  getChildContext() {
    return {
      muiTheme: ThemeManager.getCurrentTheme()
    };
  },

  render() {
    return (
        <RaisedButton label="Default" />
    );
  }

});

module.exports = RaisedButton;
4

2 に答える 2

0

RaisedButton をエクスポートし、同時に使用していますが、これまでに見たことがありません。変更してみる

  render() {
     return (
       <RaisedButton label="Default" />
     );
  }

に：

  render() {
     return (
       <button label="Default" />
     );
  }

あなたのコードサンプルに基づいて、これがあなたの問題だと思います。

于 2015-07-30T22:28:52.450 に答える
0

あなたのjsxファイルでこれを試してください：

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'

render() {
    return (
        <MuiThemeProvider>
            <RaisedButton label="Default" />
        </MuiThemeProvider>
    )
}
于 2016-08-22T03:50:38.913 に答える