Практически я получил материал ui для работы, но все же не смог ничего сделать

Итак, я реанимировал файл test.jsx, но вместо рендеринга поднятой кнопки я получаю `` (две кавычки в верхней части страницы). Console.log не дает мне никаких ошибок, поэтому я не уверен, куда идти отсюда.Практически я получил материал ui для работы, но все же не смог ничего сделать

Index.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'));

raisedButton.jsx

var RaisedButton = React.createClass({ 

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

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

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

}); 

module.exports = RaisedButton;

источник

2015-07-30 Username

Вы экспорт RaisedButton и использовать его в то же время, у меня есть никогда не видел этого раньше. Попробуйте изменить

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

To:

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

Основываясь на образец кода, это то, что я думаю, что ваш вопрос.

источник

2015-07-30 22:28:52

Он специально с использованием компонентов материала-Ui, так почему бы вы использовать

Попробуйте в файле JSX:

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

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

источник

2016-08-22 03:50:38

Практически я получил материал ui для работы, но все же не смог ничего сделать

ответ

Смежные вопросы