REDX教程:儿童从哪里来

这个问题在这里已经有了答案:

  • React组件2答案中的儿童道具

  • 在React中,你可能有两种类型的组件。 一个扩展了React.Component的类或者一个仅仅是一个香草JavaScript函数的功能组件。 功能组件也接收props同样地,我们使用类this.props (或接收它们作为构造的第一个参数,例如:

    import React from 'react';
    
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
      }
      render() {
        const { name } = this.props;
    
        return <p>Hello { name }</p>;
      }
    }
    
    <MyComponent name='Jon Snow' />
    

    或作为功能组件:

    function MyComponent(props) {
      const { name } = props;
    
      return <p>Hello { name }</p>;
    }
    

    在你的情况下,混淆来自事实,即直接在函数定义中破坏了道具。 所以上面的MyComponent可能会写成:

    function MyComponent({ name }) {
      return <p>Hello { name }</p>;
    }
    

    children托在阵营代表什么添加为组件的子元素。 例如:

    <MyComponent>
      <Name />
    </MyComponent>
    
    or even
    
    <MyComponent>
      { () => <p>Hello world</p> }
    </MyComponent>
    

    <Name />() => <p>Hello world</p>props.children等于的内容。

    在您的示例中, children FilterLink将放入FilterLink 。 例如:

    <FilterLink>
      <VisibleOnlyIfActiveIsTruethy />
    </FilterLink>
    

    children道具来自组件,当你打电话时,组件可能位于Link组件的内部(例如:

    <Parent>
     <Comp1 />
     <Comp2 />
    </Parent>
    

    在此代码中:Comp1和Comp2是父组件的子项。

    链接地址: http://www.djcxy.com/p/52167.html

    上一篇: redux tutorial : Where does children come from

    下一篇: React js avoid wrapping div