Почему материализуется не работает с реакцией

Я создал статическую веб-страницу с библиотекой materialize.css, когда я попытался переместить некоторые компоненты, чтобы реагировать, но они не работают.Почему материализуется не работает с реакцией

Это мой HTML шаблонного

<!DOCTYPE html> 
<html> 
    <head> 
    <!--Import materialize.css--> 
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> 
    <!--Let browser know website is optimized for mobile--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 
    <script src="http://fb.me/react-with-addons-0.13.1.js"></script> 
    <script src="http://fb.me/JSXTransformer-0.13.1.js"></script> 
    </head> 
    <body> 
    <div id="button"></div> 
    <script type=text/jsx src="main.js"></script> 

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script type="text/javascript" src="js/materialize.min.js"></script> 
    </body> 
</html>

и это main.js

var ButtomTest = React.createClass({ 
    render: function() { 
    return (
     <div className="test"> 
     <a class="waves-effect waves-light btn">Stuff</a> 
     </div> 
    ); 
    } 
}); 
React.render(
    <ButtomTest />, 
    document.getElementById('button') 
);

В браузере я вижу только "материал" в зеленом цвете. Что я делаю не так?

источник

2015-04-15 Jose Osorio

Проверьте правописание ... – max

Извините, английский не является родным. –

Документы подразумевают, что для этого требуется JavaScript: http://materializecss.com/waves.html#! работать? Возможно ли, что, поскольку кнопка не отображается до тех пор, пока не будет загружен файл 'materialize.min.js', он не будет вести себя так, как ожидалось? – WiredPrairie

Прежде всего, убедитесь, что вы используете className вместо атрибута class в вашем коде jsx.

Во-вторых, materialize.css использует wave.js, чтобы создать эффект волны при нажатии кнопки, и это не очень хорошо реагирует на реакцию. Но вы можете использовать material-ui `s Ripple components добиться такого же эффекта

источник

2015-04-16 10:22:56

Где мне нужно добавить ClassName? –

Спасибо i Рисунок, внутри –

Итак, react.js не работает с материализованным проектом? – xzvkm

У меня на самом деле было легче работать с материалом materializecss.com, чем с любыми другими наборами инструментов. Тем не менее, я делаю это:

1) я загрузить CSS через ссылку на главной странице, просто потому, что это проще и, кажется, не вызывает конфликтов с другими инструментами

2) До сих пор, в любое время что-нибудь не работает, потому что я набрал «класс» вместо «className» (как в вашем примере)

3) Иногда вам нужно вызвать объект Materialize javascript. Например:

Materialize.Toast("a popup says what?",4000);

К счастью, из-за того, как я загрузить его, я только должен изменить, что:

window.Materialize.Toast("a popup says what?",4000);

Моя вся структура UI просто materializecss.com + Mobx.
Это довольно хорошо работает до сих пор.

источник

2017-01-15 06:03:30

Почему материализуется не работает с реакцией

ответ

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