<业务需求>React基础: 赋值变量为组件

赋值变量为组件的方法

//  DOM 标签
const element = <div />;
render( // 渲染
   render(
   	{
       	element
       }
   )
)

//  用户自定义组价
const element = <Welcome name="Sara" />;
render( // 渲染
   render(
   	{
       	element
       }
   )
)
//  渲染组件不是函数
//  不用return
//  万不得已你可以使用元素索引 index 作为 key
const element =  numbers.map((number: number, index: number) =>
 <li key={number}>{number}</li>
);
render( // 渲染
   render(
   	{
       	element
       }
   )
)

//  JSX 函数循环组件
const arr: nuber[] = [1,2];
const element = () => {
   // 记得return回去
   return arr.map((item: number) => {
   	return(
       	 <Welcome name="Sara" key={item}>
            	{item}
            </Welcome>
            ;
       )
   })
}
render( // 渲染
   render(
   	{
       	element()
       }
   )
)

//  JSX 函数三元组件
const flag:Boolean = true;
const element = () => {
    // 记得return回去
    // null为空对象
    return flag ? <div>123</div> : null
};
render( // 渲染
   render(
   	{
       	element
       }
   )
)