写左右布局时候的一些心得:
父组件调用:
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、写无状态组件的感觉比较爽
最近开始对函数式编程感兴趣了
感觉就是追着别人跑
网友评论