Question

我尝试使用导航栏做出反应。当使用iconElementLeft在导航栏中显示图标时，它不会出现。

我的代码：

var React  = require('react'),
mui        = require('material-ui'),
Paper      = mui.Paper,
IconButton = mui.IconButton,
FontIcon   = mui.FontIcon,
AppBar     = mui.AppBar;

require('./style');

module.exports = React.createClass({
    render: function() {
        var menuButton = 
            <IconButton onClick={this.props.onMenuIconButtonTouch}>
                <FontIcon className='menu-icon icon-navigation-white icon-navigation-white-ic_menu_white_24dp' />
            </IconButton>;

        return 
            <Paper className='topNav' rounded={false}>
                <AppBar
                iconElementLeft={menuButton}
                title='Sample project'
                zDepth={0} />
            </Paper>;
    }
});

在控制台中收到两条警告：

警告：不推荐使用require（'react / addons'）。使用require（'react-addons- {addon}'）来代替访问.warning @ warning.js：45（匿名函数）@addons.js：4（匿名函数）@main.js：3038__webpack_require__ @ main.js：521fn @ main.js：76（匿名函数）@ style-propable.js：3（匿名函数）@main.js：3029__webpack_require__ @ main.js：521fn @main.js：76（匿名函数）@ app-bar.js： 4（匿名函数）@ app-bar.js：184（匿名函数）@main.js：3020__webpack_require__ @ main.js：521fn @main.js：76（匿名函数）@ index.js：4（匿名函数）@ main.js：3011__webpack_require__ @ main.js：521fn @ main.js：76（匿名函数）@ index.jsx：7（匿名函数）@ index.jsx：52（匿名函数）@index.jsx：53（匿名函数）@main.js：3002__webpack_require__ @ main.js：521fn @main.js：76（匿名函数）@ routes.jsx：18（匿名函数）@ routes.jsx：23（匿名函数）@ routes.jsx：24（匿名函数）@ main.js：2993__webpack_require__ @ main.js：521fn @main.js：76（匿名函数）@ app.jsx：8（匿名函数）@ app.jsx：20（匿名函数）@ app.jsx：21（匿名函数）@main.js：1103__webpack_require__ @ main.js：521fn @main.js：76（匿名函数）@ multi_main：3（匿名函数）@ main.js：554__webpack_require__ @ main.js：521（匿名函数）@main.js：544（匿名函数）@main.js：547

warning.js：45警告：不推荐使用React.findDOMNode。请改用require（'react-dom'）中的ReactDOM.findDOMNode。

我的package.json

{
  "name": "react-material-webpack-boilerplate",
  "version": "0.0.0",
  "description": "",
  "main": "app/app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint . --ext .js,.jsx",
    "dev-server": "webpack-dev-server --config webpack-dev-server.config.js --progress --colors --port 2992 --inline",
    "hot-dev-server": "webpack-dev-server --config webpack-hot-dev-server.config.js --hot --progress --colors --port 2992 --inline",
    "build": "webpack --config webpack-production.config.js --progress --profile --colors",
    "start-dev": "node lib/server-development",
    "start": "node lib/server-production"
  },
  "precommit": [
    "lint"
  ],
  "keywords": [
    "webpack",
    "react",
    "starter",
    "boilerplate",
    "hot"
  ],
  "author": "Mike Lerner",
  "license": "MIT",
  "dependencies": {
    "async": "^1.3.0",
    "autoprefixer-loader": "^2.0.0",
    "babel-core": "^5.1.9",
    "babel-loader": "^5.3.1",
    "body-parser": "^1.12.2",
    "css-loader": "^0.15.1",
    "express": "^4.12.3",
    "extract-text-webpack-plugin": "^0.8.2",
    "file-loader": "^0.8.1",
    "html-loader": "^0.3.0",
    "less": "^2.5.0",
    "less-loader": "^2.2.0",
    "material-ui": "^0.9.2",
    "material-ui-sass": "^0.7.2",
    "node-sass": "^3.2.0",
    "null-loader": "^0.1.0",
    "react": "^0.14.3",
    "react-fontawesome": "^0.3.3",
    "react-hot-loader": "^1.2.5",
    "react-material-icon": "^0.1.0",
    "react-proxy-loader": "^0.3.4",
    "react-router": "^0.13.2",
    "react-tap-event-plugin": "^0.1.6",
    "sass-loader": "^1.0.2",
    "style-loader": "0.12.3",
    "superagent": "^1.2.0",
    "url-loader": "^0.5.5",
    "uuid": "^2.0.1",
    "webpack": "^1.8.4",
    "webpack-dev-server": "^1.8.0"
  },
  "devDependencies": {
    "babel-eslint": "^3.0.1",
    "eslint": "^0.24.0",
    "eslint-plugin-react": "^2.1.0",
    "pre-commit": "^1.0.6"
  }
}

Answer 1

据我所知，似乎<FontIcon>不能是空标签。

更改您的FontIcon：

<FontIcon className="material-icons">navigation</FontIcon>

我创建了https://wordpress.org/plugins/shortcode-empty-paragraph-fix/和app来进一步调查。

Answer 2

我现在用这个：https://github.com/andreypopp/react-fa

它简单而且工作正常！

<li> Composition: Suede 100%</li>
<li> Lining Composition: Suede 100%</li>

FontIcon不会显示在AppBar中

2 个答案: