react组件中返回并列元素的方法
作者:互联网
我们在写react组件的时候,经常会遇到这种问题,在render中return元素只能有一个顶级元素,比如div,假如写成这样就会报错:
render(){ return( <div>123</div> <div>456</div> ) }
因为return中只能有一个顶级的包裹元素:
render(){ return( <div> <div>456</div> </div> ) }
这样可以解决问题,但是这样会有一个问题,就是多了一层div,我现在不想多一层div,但又可以并列展示,总结了几种办法:
1:数组的形式
render(){ return[ <div>123</div>, <div>456</div> ] }
2:React.Fragment
render(){ return( <React.Fragment> <div>123</div> <div>456</div> </React.Fragment> ) }
或者
render(){ return( <> <div>123</div> <div>456</div> </> ) }
3:高阶组件的形式
const ComponentDemo = ({ children }) => children; render(){ return( <ComponentDemo> <div>123</div> <div>456</div> </ComponentDemo> ) }
原文地址:https://www.love85g.com/?p=1746
标签:return,render,456,react,123,并列,组件,div 来源: https://www.cnblogs.com/zyl-Tara/p/11021766.html