Question

我在Meteor / React / Material UI应用程序中创建了一个自定义SVG图标。图标的代码就像

import React from 'react';
import SvgIcon from 'material-ui/SvgIcon';

let LoadBalancerIcon = (props) => (
    <SvgIcon {...props}>

<circle cx="50" cy="48.75" r="30.43" fill="#f58536"/>
<path fill="#fff" d="M24.42 39.87h11.05v17.76H24.42zM59.73 27.74h9.86v9.86h-9.86zM59.73 43.82h9.86v9.86h-9.86zM59.73 59.91h9.86v9.86h-9.86z"/>
<path fill="#fff" d="M57.01 50.05l1.64-.81 1.08-.53-1.08-.54-1.46-.72-4.4-2.17v2.17H39.58l15.01-9.61 1.19 1.84 2.49-4.2.73-1.24.73-1.22-1.4.17-1.59.18-4.7.55 1.13 1.74-18.41 11.79-2.03 1.3 2.42 1.54 18.02 11.55-1.13 1.74 4.7.55 1.59.18 1.4.17-.73-1.22-.73-1.24-2.49-4.2-1.19 1.84-15.01-9.61h13.21v2.09l4.22-2.09" />

    </SvgIcon>
);

LoadBalancerIcon.displayName = 'LoadBalancerIcon';
LoadBalancerIcon.muiName = 'SvgIcon';

export default LoadBalancerIcon;

这很有效，所以我想我会为这些图标创建一个NPM模块，以便其他人可以使用它。我用类似

的代码创建了模块

'use strict';
var React = require('react');
var  SvgIcon  = require('material-ui/SvgIcon');

class LoadBalancerIcon extends React.Component {
    constructor() {
        super();
    }
    render() {
        return (
            <SvgIcon >
                <circle cx="50" cy="48.75" r="30.43" fill="#f58536"/>
                <path fill="#fff" d="M24.42 39.87h11.05v17.76H24.42zM59.73 27.74h9.86v9.86h-9.86zM59.73 43.82h9.86v9.86h-9.86zM59.73 59.91h9.86v9.86h-9.86z"/>
                <path fill="#fff" d="M57.01 50.05l1.64-.81 1.08-.53-1.08-.54-1.46-.72-4.4-2.17v2.17H39.58l15.01-9.61 1.19 1.84 2.49-4.2.73-1.24.73-1.22-1.4.17-1.59.18-4.7.55 1.13 1.74-18.41 11.79-2.03 1.3 2.42 1.54 18.02 11.55-1.13 1.74 4.7.55 1.59.18 1.4.17-.73-1.22-.73-1.24-2.49-4.2-1.19 1.84-15.01-9.61h13.21v2.09l4.22-2.09" />
            </SvgIcon>
        );
    }
}

LoadBalancerIcon.displayName = 'LoadBalancerIcon';
LoadBalancerIcon.muiName = 'SvgIcon';

module.exports = LoadBalancerIcon;

但是当我在应用程序中使用它时，我收到此错误

＆＃34;元素类型无效：期望一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。＆＃34;

我使用Babel来传输文件，我可以看到已编译的文件如下：

'use strict';

var React = require('react');
var SvgIcon = require('material-ui/SvgIcon');

class LoadBalancerIcon extends React.Component {
    constructor() {
        super();
    }
    render() {
        return React.createElement(
            SvgIcon,
            null,
            React.createElement('circle', { cx: '50', cy: '48.75', r: '30.43', fill: '#f58536' }),
            React.createElement('path', { fill: '#fff', d: 'M24.42 39.87h11.05v17.76H24.42zM59.73 27.74h9.86v9.86h-9.86zM59.73 43.82h9.86v9.86h-9.86zM59.73 59.91h9.86v9.86h-9.86z' }),
            React.createElement('path', { fill: '#fff', d: 'M57.01 50.05l1.64-.81 1.08-.53-1.08-.54-1.46-.72-4.4-2.17v2.17H39.58l15.01-9.61 1.19 1.84 2.49-4.2.73-1.24.73-1.22-1.4.17-1.59.18-4.7.55 1.13 1.74-18.41 11.79-2.03 1.3 2.42 1.54 18.02 11.55-1.13 1.74 4.7.55 1.59.18 1.4.17-.73-1.22-.73-1.24-2.49-4.2-1.19 1.84-15.01-9.61h13.21v2.09l4.22-2.09' })
        );
    }
}

LoadBalancerIcon.displayName = 'LoadBalancerIcon';
LoadBalancerIcon.muiName = 'SvgIcon';

module.exports = LoadBalancerIcon;

如果我写的文件不在ES6中，如：

'use strict';

var React = require('react');
var mui = require('material-ui');
var SvgIcon = mui.SvgIcon;

var LoadBalancerIcon = React.createClass({
    displayName: 'LoadBalancerIcon',

    render: function render() {
        return React.createElement(
            SvgIcon,
            this.props,
            [
                React.createElement('circle', { cx: '50', cy: '48.75', r: '30.43', fill: '#f58536' }),
                React.createElement('path', { d: 'M24.42 39.87h11.05v17.76H24.42zM59.73 27.74h9.86v9.86h-9.86zM59.73 43.82h9.86v9.86h-9.86zM59.73 59.91h9.86v9.86h-9.86z', fill: '#fff' }),
                React.createElement('path', { d: 'M57.01 50.05l1.64-.81 1.08-.53-1.08-.54-1.46-.72-4.4-2.17v2.17H39.58l15.01-9.61 1.19 1.84 2.49-4.2.73-1.24.73-1.22-1.4.17-1.59.18-4.7.55 1.13 1.74-18.41 11.79-2.03 1.3 2.42 1.54 18.02 11.55-1.13 1.74 4.7.55 1.59.18 1.4.17-.73-1.22-.73-1.24-2.49-4.2-1.19 1.84-15.01-9.61h13.21v2.09l4.22-2.09', fill: '#fff' })
            ]
        );
    }

});

module.exports = LoadBalanceIcon;

它工作正常，但我宁愿在ES6中写它。可能是什么问题？

Answer 1

我发现了问题。在（非ES6）代码中，我有

dplyr

与

var SvgIcon = mui.SvgIcon;

更改修复问题。更改需要导入，完整示例如

var  SvgIcon  = require('material-ui/SvgIcon');

使用ES6语法在NPM模块中创建SVG React Material-UI图标

1 个答案: