muiName属性是什么，何时必须为Material-UI组件设置它? [英] What is the muiName property and when do I have to set it for Material-UI components?

问题描述

在material-ui官方文档中，AppBar组件的示例这里看起来像这样:

In the offical material-ui documentation an example for the AppBar component here looks like this:

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()方法中是否应始终将其设置为顶级组件的名称?

What is muiName and when/why do I have to set it? Should it always be set to the name of the top-level component in the render() method?

在同一网页上有AppBar的示例，其中未设置muiName.

On the same webpage there are examples to AppBar where muiName is not set.

推荐答案

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弱

Let's check this example: // @flow weak

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>
  );
}

如果包装了material-ui组件，则应将'muiName'属性设置为wrapper组件，其值应为包装的material-ui组件的名称. 希望您能理解这句话:)

If you wrapped material-ui component you should set 'muiName' property to wrapper component with value as name of material-ui component you wrapped. I hope you understand this phrase :)

这篇关于muiName属性是什么，何时必须为Material-UI组件设置它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！