亲宝软件园·资讯

展开

React JSX深入浅出理解

码农小菲 人气:0

概述 

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 类型中使用点语法

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

用户定义的组件必须以大写字母开头

以小写字母开头的元素代表一个 HTML 内置组件

如 div 标签 会编译为 React.createElement(div)

大写字母开头的元素则对应着在 JavaScript 引入或自定义的组件

如 Foo 标签 会编译为 React.createElement(Foo)

 import React from 'react';
// 正确!组件需要以大写字母开头:
function Hello(props) {
  // 正确! 这种 <div> 的使用是合法的,因为 div 是一个有效的 HTML 标签:
  return <div>Hello {props.toWhat}</div>;
}
function HelloWorld() {
  // 正确!React 知道 <Hello /> 是一个组件,因为它是大写字母开头的:
  return <Hello toWhat="World" />;
}

在运行时选择类型

不能将通用表达式作为 React 元素类型,如果想通过通用表达式来动态决定元素类型,需要首先将它赋值给大写字母开头的变量。

import React from 'react';
import { PhotoStory, VideoStory } from './stories';
   const components = {
     photo: PhotoStory,
     video: VideoStory
   };
   //错误写法:
   function Story(props) {
     // 错误!JSX 类型不能是一个表达式。
     return <components[props.storyType] story={props.story} />;
   }
  //正确写法:
  function Story(props) {
     // 正确!JSX 类型可以是大写字母开头的变量。
     const SpecificStory = components[props.storyType];
     return <SpecificStory story={props.story} />;
 }

JavaScript 表达式作为 Props

可以把包裹在 {} 中的 JavaScript 表达式作为一个 prop 传递给 JSX 元素

 <MyComponent foo={1 + 2 + 3 + 4} />

if 语句以及 for 循环不是 JavaScript 表达式,所以不能在 JSX 中直接使用,但可以用在 JSX 以外的代码中

function NumberDescriber(props) {
   let description;
   if (props.number % 2 == 0) {
     description = <strong>even</strong>;
   } else {
     description = <i>odd</i>;
   }
   return <div>{props.number} is an {description} number</div>;
 }

字符串字面量

可以将字符串字面量赋值给 prop

//等价
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />

将字符串字面量赋值给 prop 时,它的值是未转义的

//等价
 <MyComponent message="&lt;3" />
<MyComponent message={'<3'} />

Props 默认值为 “True” 如果没给 prop 赋值,它的默认值是 true

//等价
 <MyTextBox autocomplete />
<MyTextBox autocomplete={true} />

展开属性

可以使用展开运算符 … 来在 JSX 中传递整个 props 对象

 function App1() {
    return <Greeting firstName="Ben" lastName="Hector" />;
}
  function App2() {
    const props = {firstName: 'Ben', lastName: 'Hector'};
    return <Greeting {...props} />;
  }

JSX子元素

字符串字面量

<MyComponent>Hello world!</MyComponent>

子元素允许由多个 JSX 元素组成

 <MyContainer>
   <MyFirstComponent />
   <MySecondComponent />
 </MyContainer>

JavaScript 表达式作为子元素,使用 {} 包裹

//等价
<MyComponent>foo</MyComponent>
<MyComponent>{'foo'}</MyComponent>
function Item(props) {
 return <li>{props.message}</li>;
}
function TodoList() {
 const todos = ['finish doc', 'submit pr', 'nag dan to review'];
 return (
   <ul>
     {todos.map((message) => <Item key={message} message={message} />)}
   </ul>
 );
}

函数作为子元素

 // 调用子元素回调 numTimes 次,来重复生成组件
function Repeat(props) {
 let items = [];
 for (let i = 0; i < props.numTimes; i++) {
   items.push(props.children(i));
 }
 return <div>{items}</div>;
}
function ListOfTenThings() {
 return (
   <Repeat numTimes={10}>
     {(index) => <div key={index}>This is item {index} in the list</div>}
   </Repeat>
 );
}
//可以将任何东西作为子元素传递给自定义组件,只要确保在该组件渲染之前能够被转换成 React 理解的对象。这种用法并不常见,但可以用于扩展 JSX。

布尔类型、Null 以及 Undefined 将会忽略,不会被渲染。如果你想渲染 false、true、null、undefined 等值,需要先将它们转换为字符串:

<div>
   My JavaScript variable is {String(myVariable)}.
 </div>

加载全部内容

相关教程
猜你喜欢
用户评论