Ошибка материала пользовательского интерфейса (отсутствует преобразование свойств класса).

Я пытался установить тему material-ui в Meteor с помощью react-mounter для монтирования компонентов.

У меня были проблемы с настройкой, поэтому я расширил компонент, чтобы установить тему, используя примеры на сайте material-ui.

Теперь я получаю следующее сообщение об ошибке.

client/components/navbar.jsx:14:4: /client/components/navbar.jsx: преобразование свойств отсутствующего класса.

Вот пример кода панели навигации

import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import Navigationclose from 'material-ui/svg-icons/navigation/close';
import IconMenu from 'material-ui/IconMenu';
import NavigationMoreVert from 'material-ui/svg-icons/navigation/more-vert';
import MenuItem from 'material-ui/MenuItem';
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';


class Navbar extends React.Component {

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

    getChildContext() {
        return {muiTheme: getMuiTheme(baseTheme)};
    }

    render() {

        return (<AppBar
            title="Title"
            iconElementLeft={<IconButton><Navigationclose /></IconButton>}
            iconElementRight={
           <IconMenu
               iconButtonElement={
                <IconButton><NavigationMoreVert /></IconButton>
              }
               targetOrigin={{horizontal: 'right', vertical: 'top'}}
              anchorOrigin={{horizontal: 'right', vertical: 'top'}}
          >
              <MenuItem primaryText="Refresh"/>
                <MenuItem primaryText="Help"/>
              <MenuItem primaryText="Sign out"/>
           </IconMenu>
        }
        />);
    }
}


export default Navbar;

Вот роутер.jsx

import React from 'react';
import {mount} from 'react-mounter';
import {MainLayout} from '/client/layouts/mainLayout.jsx';
import Content from '/client/components/content.jsx';
import Navbar from '/client/components/navbar.jsx';
import Footer from '/client/components/footer.jsx';

FlowRouter.route("/", {
    action () {
    mount(MainLayout, {
            navbar: <Navbar/>,
        content: <Content/>,
        footer: <Footer/>
});
}
});

reactjs material-ui babeljs meteor
person Sam Puccio    schedule 25.04.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вам нужно преобразование Бабеля. Meteor 1.3.3+ поддерживает дополнительные плагины и пресеты через .babelrc

Установите статическое преобразование:

npm install babel-plugin-transform-class-properties

# .babelrc
{
  "presets": [
    "meteor",
    "es2015",
    "stage-1"
  ],

  "plugins": [
    "transform-class-properties"
  ]
}

Поддержка в Meteor 1.3.3

Преобразование

person VladFr    schedule 28.07.2016
comment
Если вы еще не установили stage-1. используйте 1_ - person Zitao Xiong; 05.10.2016

arrow_upward
0
arrow_downward

Я изменил его с расширения класса на React.createClass, и теперь он работает.

import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import Navigationclose from 'material-ui/svg-icons/navigation/close';
import IconMenu from 'material-ui/IconMenu';
import NavigationMoreVert from 'material-ui/svg-icons/navigation/more-vert';
import MenuItem from 'material-ui/MenuItem';
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

var Navbar = React.createClass({
    childContextTypes: {muiTheme: React.PropTypes.object},
    getChildContext() {
        return {muiTheme: getMuiTheme(baseTheme)};
    },
    navigate(event, index, item) {
        console.log('navigate', item);
        FlowRouter.go(item.route);
    },
    getMenuItems() {
        console.log('navigate1');
        return [
            { route: '/', text: 'Home' },
            { route: '/table', text: 'Table' }
        ];
    },

    render() {
        console.log('Render');
        return (<AppBar
            title="Title"
            iconElementLeft={<IconButton><Navigationclose /></IconButton>}
            iconElementRight={
           <IconMenu
               iconButtonElement={
                <IconButton><NavigationMoreVert /></IconButton>
              }
               targetOrigin={{horizontal: 'right', vertical: 'top'}}
              anchorOrigin={{horizontal: 'right', vertical: 'top'}}
           >
              <MenuItem primaryText="Refresh"/>
                <MenuItem primaryText="Help"/>
              <MenuItem primaryText="Sign out"/>
           </IconMenu>
        }
        />);
    }
});


export default Navbar;
person Sam Puccio    schedule 25.04.2016