无法将反应组件作为属性传递给另一个组件答案

【问题标题】：Unable to pass react component as attribute to another component无法将反应组件作为属性传递给另一个组件
【发布时间】：2016-05-03 13:36:00
【问题描述】：

我正在尝试将一个 React 组件设置为另一个像这样的 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>

基本上，react 组件生成为[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>
    );
  }

});

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

我已经尝试了您的代码，对我来说效果很好。我正在使用 React 版本 15.0.2。

我不确定，但我认为您尝试的方式是正确的。您想将组件放在“icon”道具中。

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

Material UI Tab's

【讨论】：