0

所以我对 test.jsx 文件进行了反应，但我没有渲染凸起的按钮，而是得到了 ``（页面顶部的两个引号）。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>

测试.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

在你的 jsx 文件中试试这个：

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

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

您正在导出 RaisedButton 并同时使用它，我以前从未见过。尝试改变

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

至：

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

根据您的代码示例，这就是我认为您的问题所在。

于 2015-07-30T22:28:52.450 回答