Question

我正在尝试将React组件设置为另一个反应组件的属性（我使用材料ui）：

<Tabs>
   <Tab icon={<ActionFlightTakeoff />} />
</Tabs>

但是在浏览器中，检查显示了这一点：

<div icon="[object Object]" tabindex="1" style="did-flip:true;display:table-cell;cursor:pointer;text-align:center;vertical-align:middle;height:48px;color:rgba(255,255,255,0.6);outline:none;font-size:14px;font-weight:500;white-space:initial;font-family:Roboto, sans-serif;box-sizing:border-box;width:33.333333333333336%;" data-reactid=".0.1.0.$1/=11"></div>

基本上，反应组件生成为[object Object]，没有生成图标我能做错什么？

这是完整的文件：

import React, { Component, PropTypes } from 'react';
import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';
import FontIcon from 'material-ui/lib/font-icon';
import ActionFlightTakeoff from 'material-ui/lib/svg-icons/action/flight-takeoff';

export default React.createClass({

  styles: {
    paper: {
      height: 100,
      margin: 10,
      padding: 10,
      textAlign: 'center'
    }
  },

  render: function() {
    return (

            <Tabs>
              <Tab icon={<FontIcon className="muidocs-icon-action-home" />} />
              <Tab icon={<ActionFlightTakeoff />} />
              <Tab icon={<FontIcon className="material-icons">favorite</FontIcon>} />
            </Tabs>
    );
  }

});

Answer 1

我已经尝试过你的代码，对我来说工作正常。我正在使用React版本15.0.2。

我不确定，但我认为你尝试它的方式，它是正确的。您希望将Component放在“icon”prop。

中

我在文档中查找过它，它正在等待FontIcon或SvgIcon。因此，问题不在于支柱。

Material UI Tab's

无法将react组件作为属性传递给另一个组件

1 个答案: