Reactjs 什么是muiName属性？何时必须为材质UI组件设置它？

在官方材料ui文档中，

AppBar

组件的示例如下所示：

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;

及

什么是

muiName

以及何时/为什么必须设置它？是否应始终将其设置为

render（）

方法中顶级组件的名称

在同一网页上，有一些未设置

muiName

的

AppBar

示例。

中的答案是：

为了提供最大的灵活性和性能，我们需要一种方法来了解组件接收的子元素的性质。为了解决这个问题，我们在需要时用muiName静态属性标记一些组件。

让我们检查一下这个示例： //@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>
  );
}

从“React”导入React；
从“物料界面/图标按钮”导入图标按钮；
从“物料界面/图标”导入图标；
const WrappedIcon=props=>；
WrappedIcon.muiName='Icon'；
导出默认函数组合（）{
返回(
警报
警报
);
}

如果包装了材质ui组件，则应将“muiName”属性设置为包装组件，值为包装的材质ui组件的名称。 我希望你能理解这个短语：）

答案是：

为了提供最大的灵活性和性能，我们需要一种方法来了解组件接收的子元素的性质。为了解决这个问题，我们在需要时用muiName静态属性标记一些组件。

让我们检查一下这个示例： //@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>
  );
}

从“React”导入React；
从“物料界面/图标按钮”导入图标按钮；
从“物料界面/图标”导入图标；
const WrappedIcon=props=>；
WrappedIcon.muiName='Icon'；
导出默认函数组合（）{
返回(
警报
警报
);
}

如果包装了材质ui组件，则应将“muiName”属性设置为包装组件，值为包装的材质ui组件的名称。 我希望你能理解这个短语：）

中的例子对我帮助很大

现在，使用，您可以添加

muiName

，如下所示：

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

const WrappedIcon=props=>；
WrappedIcon.muiName=Icon.muiName；

中的示例对我帮助很大

现在，使用，您可以添加

muiName

，如下所示：

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

const WrappedIcon=props=>；
WrappedIcon.muiName=Icon.muiName；

什么是“需要时”？我如何知道何时以及将属性设置为什么？就像前面提到的：有些例子可以做到，有些则不行。作为旁注：您已经链接了beta版

v1.0.0-beta.6

的文档。我应该提到我使用的是最新的官方版本

0.19.0

。在该文档中，没有提到

muiName

，我错过了这一点。抱歉。@Joerg我想这个带有muiName静态属性的功能将包含在下一个主要版本中。若你们检查我前面提到的链接，你们可以找到答案的例子。我将尝试更新我的答案来向您解释。感谢您对示例的详细说明。那么“需要时”就变成了“总是”？那么，为什么其他示例不设置

muiName

？它们都通过箭头函数定义React组件，从而以某种方式包装材质UI组件。但是，它们不设置

muiName

。我还是不明白。如果你专注于应用程序的性能，最好信任material ui的维护者，为material ui组件的所有包装设置muiName…或者阅读material ui的代码，尝试找到muiName使用的地方并深入研究。好吧，但问题是，为什么那些维护人员自己不在自己的示例中设置

muiName

？什么是“需要时”呢？我如何知道何时以及将属性设置为什么？就像前面提到的：有些例子可以做到，有些则不行。作为旁注：您已经链接了beta版

v1.0.0-beta.6

的文档。我应该提到我使用的是最新的官方版本

0.19.0

。在该文档中，没有提到

muiName

，我错过了这一点。抱歉。@Joerg我想这个带有muiName静态属性的功能将包含在下一个主要版本中。若你们检查我前面提到的链接，你们可以找到答案的例子。我将尝试更新我的答案来向您解释。感谢您对示例的详细说明。那么“需要时”就变成了“总是”？那么，为什么其他示例不设置

muiName

？它们都通过箭头函数定义React组件，从而以某种方式包装材质UI组件。但是，它们不设置

muiName

。我还是不明白。如果你专注于应用程序的性能，最好信任material ui的维护者，为material ui组件的所有包装设置muiName…或者阅读material ui的代码，尝试找到muiName使用的地方并深入研究。好吧，但问题是，为什么这些维护人员自己不在自己的示例中设置

muiName

？