用点表示法反应组件

这是我对某人在StackOverflow上的问题的回答。 我们如何定义可通过点符号访问的React组件?

看一下下面的代码。 我们具有Menu组件及其三个子Menu.Item

 const App = () => ( 

Home
Blog
About

);

我们如何定义像Menu这样的组件? 它具有某种可以通过点表示法访问的“子组件”的地方。

好吧,这实际上是一种非常常见的模式。 它实际上不是子组件,而只是另一个组件与另一个组件的连接。

让我们以上面的Menu组件为例。 我们将此组件放入其自己的专用文件: menu.js 。 首先,让我们在此模块文件上分别定义这两个组件:

 // menu.js 
import React from 'react';

export const MenuItem = ({ children }) =>
  • {children}
  • ;

    export default const Menu = ({ children }) =>
      {children}
    ;

    这只是一个简单的功能组件。 Menu是带有ul标签的父级。 并且MenuItem将充当其子级。 现在我们可以像这样使用这两个组件:

     import React from 'react'; 
    import { render } from 'react-dom';
    import Menu, { MenuItem } from './menu';

    const App = () => (

    Home
    Blog
    About

    );

    render(, document.getElementById('root'));

    点符号在哪里? 为了使我们的MenuItem组件可通过点民族访问,我们可以简单地将其作为静态属性附加到Menu组件。 为此,我们不能再将功能组件用于Menu并切换到类组件:

     // menu.js 
    import React, { Component } from 'react';

    export default const MenuItem = ({ children }) =>
  • {children}
  • ;

    export default class Menu extends Component {
    static Item = MenuItem;

    render() {
    return (
      {this.props.children}

    );
    }
    }

    现在,我们可以使用点符号来声明MenuItem组件:

     import React from 'react'; 
    import { render } from 'react-dom';
    import Menu from './menu';

    const App = () => (

    Home
    Blog
    About

    );

    render(, document.getElementById('root'));

    您也可以将MenuItem组件定义直接放在Menu类中。 但是这样一来,您就不再可以单独导入MenuItem

     import React, { Component } from 'react'; 

    export default class Menu extends Component {
    static Item = ({ children }) =>
  • {children}
  • ;

    render() {
    return (
      {this.props.children}

    );
    }
    }

    最初于 2018 年4月7日 发布在 bagja.net