什麼是muiName屬性，什麼時候我必須爲Material-UI組件設置它？

Question

在官方材料的UI文檔的AppBar組件here一個例子是這樣的：

import React, {Component} from 'react'; 
import AppBar from 'material-ui/AppBar'; 
import IconButton from 'material-ui/IconButton'; 
import IconMenu from 'material-ui/IconMenu'; 
import MenuItem from 'material-ui/MenuItem'; 
import FlatButton from 'material-ui/FlatButton'; 
import Toggle from 'material-ui/Toggle'; 
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert'; 
import NavigationClose from 'material-ui/svg-icons/navigation/close'; 

class Login extends Component { 
    static muiName = 'FlatButton'; 

    render() { 
    return (
     <FlatButton {...this.props} label="Login" /> 
    ); 
    } 
} 

const Logged = (props) => (
    <IconMenu 
    {...props} 
    iconButtonElement={ 
     <IconButton><MoreVertIcon /></IconButton> 
    } 
    targetOrigin={{horizontal: 'right', vertical: 'top'}} 
    anchorOrigin={{horizontal: 'right', vertical: 'top'}} 
    > 
    <MenuItem primaryText="Refresh" /> 
    <MenuItem primaryText="Help" /> 
    <MenuItem primaryText="Sign out" /> 
    </IconMenu> 
); 

Logged.muiName = 'IconMenu'; 

/** 
* This example is taking advantage of the composability of the `AppBar` 
* to render different components depending on the application state. 
*/ 
class AppBarExampleComposition extends Component { 
    state = { 
    logged: true, 
    }; 

    handleChange = (event, logged) => { 
    this.setState({logged: logged}); 
    }; 

    render() { 
    return (
     <div> 
     <Toggle 
      label="Logged" 
      defaultToggled={true} 
      onToggle={this.handleChange} 
      labelPosition="right" 
      style={{margin: 20}} 
     /> 
     <AppBar 
      title="Title" 
      iconElementLeft={<IconButton><NavigationClose /></IconButton>} 
      iconElementRight={this.state.logged ? <Logged /> : <Login />} 
     /> 
     </div> 
    ); 
    } 
} 

export default AppBarExampleComposition; 

我的問題是關於陳述

static muiName = 'FlatButton'; 

和

Logged.muiName = 'IconMenu'; 

是什麼muiName何時/爲什麼我必須設置它？它應該始終設置爲render()方法中頂級組件的名稱？

在同一個網頁上有AppBar的示例，其中muiName未設置。

Answer 1

答案在documentation是：

In order to provide the maximum flexibility and performance, we need a way to know the nature of the child elements a component receives. To solve this problem we tag some of our components when needed with a muiName static property.

讓我們來看看這個例子：// 弱@flow

import React from 'react'; 
import IconButton from 'material-ui/IconButton'; 
import Icon from 'material-ui/Icon'; 

const WrappedIcon = props => <Icon {...props} />; 
WrappedIcon.muiName = 'Icon'; 

export default function Composition() { 
    return (
    <div> 
     <IconButton> 
     <Icon>alarm</Icon> 
     </IconButton> 
     <IconButton> 
     <WrappedIcon>alarm</WrappedIcon> 
     </IconButton> 
    </div> 
); 
} 

如果包裝材料UI組件，你應該設置 'muiName'屬性包裝器組件，其值爲您包裝的material-ui組件的名稱。 我希望你能理解這句話:)