2018-07-10 关于组件下面子组件的写法,立个Mark

2018-07-10  本文已影响0人  十月鹰飞

写左右布局时候的一些心得:

父组件调用:

const { LeftPart, RightPart } = LeftRgithLayout;

const NewReservation = () => (
<div className="new-Reservation">
<LeftRgithLayout>
<LeftPart>
这里放左边内容
</LeftPart>
<RightPart>
这里放右边内容
</RightPart>
</LeftRgithLayout>
</div >
);

export default NewReservation;

子组件的写法:
const LeftRgithLayout = props => (
<div>
{LeftRgithLayout.LeftPart(props.children)}
{LeftRgithLayout.RightPart(props.children)}
</div>
);

LeftRgithLayout.LeftPart = item => (
<div className="left-part">
{item[0].props.children}
</div>
);

LeftRgithLayout.RightPart = item => (
<div className="right-part">
{item[1].props.children}
</div>
);

export default LeftRgithLayout;

要点有两个:
1、const { LeftPart, RightPart } = LeftRgithLayout; 就说明这个是子组件的一个方法,当初就是没想起来。
2、既然这样写可以,那么写成静态方法是妥妥的可以的
3、写无状态组件的感觉比较爽

最近开始对函数式编程感兴趣了
感觉就是追着别人跑

上一篇 下一篇

猜你喜欢

热点阅读