React(精读官方文档) -高级指引 - 深入 JSX

最新推荐文章于 2024-09-12 18:11:20 发布

码农小菲

最新推荐文章于 2024-09-12 18:11:20 发布

阅读量507

点赞数 1

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/xbczrz/article/details/128143900

版权

深入 JSX

概述

jsx 本质是React.createElement(component, props, …children)的语法糖
component 指定 React 元素的类型
React 必须在作用域内
在 JSX 类型中可以使用点语法
不能将通用表达式作为 React 元素类型
js表达式可以作为props传递给 jsx
Props 默认值为 “True”
布尔类型、Null 以及 Undefined 不会被渲染

React.createElement(component, props, …children)语法糖

	//如下 JSX 代码：
	<MyButton color="blue" shadowSize={
   2}>
	  Click Me
	</MyButton>
    
    //会编译为：
    React.createElement(
	  MyButton,
	  {
   color: 'blue', shadowSize: 2},
	  'Click Me'
	)
	
		//如果没有子节点，你还可以使用自闭合的标签形式，如：
	  <div className="sidebar" />
	  //会编译为:
	  React.createElement(
		  'div',
		  {
   className: 'sidebar'}
		)

指定 React 元素类型

JSX 标签的第一部分指定了 React 元素的类型，大写字母开头的 JSX 标签意味着它们是 React 组件

React 必须在作用域内

由于 JSX 会编译为 React.createElement 调用形式，所以 React 库也必须包含在 JSX 代码作用域内

 //在如下代码中，虽然 React 和 CustomButton 并没有被直接使用，但还是需要导入：
   import React from 'react';
   import CustomButton from './CustomButton';
   
   function WarningButton() {
     
     // return React.createElement(CustomButton, {color: 'red'}, null);
     return <CustomButton color="red" />;
   }

在 JSX 类型中使用点语法

以使用点语法来引用一个 React 组件

你在一个模块中导出许多 React 组件时，这会非常方便哦

   import React from 'react';
   const MyComponents = {
     
     DatePicker: function DatePicker(props){
     
       return <div>Imagine a {
     props.color} datepicker here