- https://reactjs.org/docs/jsx-in-depth.html
- JSX in Depth
https://babeljs.io/ JS 编译器, 学习 react 和 JS 直接的转换.
JSX 仅支持句法糖 syntactic sugar:
React.createElement(component, props, ...children)函数,
JSX code:
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>
编译 compiles into:
- React.createElement(
- MyButton,
- {color: 'blue', shadowSize: 2},
- 'Click Me'
- )
也可以使用 self_closing form of the tag if there are no children. So:
- <div className="sidebar" />
- compiles into:
- React.createElement(
- 'div',
- {className: 'sidebar'},
- null
- )
函数形式的:
- function hello() {
- return <div>Hello world!</div>;
- }
转换为:
- function hello() {
- return React.createElement(
- 'div',
- null,
- 'Hello world!'
- );
- }
关于 React 元素的格式:
React 一定在 Scope 内.
使用. Dot Notaiton , 可以在 JSX 中使用点符号. 如果一个模块要调出一些 React 组件, 这样就方便了. 例子:
- 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" />;
- }
自定义的组件必须首字母大写(除非分配它一个首字母大写的变量).function Hello(props){...}
在运行时选择类型 Choosing the type at runtime
不能把表达式用做 React element type. 但是可以把它分配给一个大写字母的变量, 然后就可以间接用 JSX 格式了
- import React from 'react';
- import { PhotoStory, VideoStory } from './stories';
- const components = {
- photo: PhotoStory,
- video: VideoStory
- };
- function Story(props) {
- // Wrong! JSX type can't be an expression.
- return <components[props.storyType] story={props.story} />;
- }
- function Story(props) {
- // Correct! JSX type can be a capitalized variable.
- const SpecificStory = components[props.storyType];
- return <SpecificStory story={props.story} />;
- }
- Props in JSX
通过{}, 任何 JS expression 都可以作为 props. 例如 < MyComponent foo={1 + 2 + 3 + 4} />
if statements and for loops 不是 JS 表达式, 不能直接用于 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>;
- }
条件判断 Inline 的写法:
- {true && expression} // 如果是 true, 则执行表达式.
- {condition ? true : false }
防止组件被渲染:
return null; ??, 组件的 lifecycle 方法钩子方法, 仍然生效 componentWillUpdate 和 componentDidUpdate.
- Children in JSX
- string Literals
- <div>This is valid HTML & JSX at the same time.</div>
& 就是 &
编译:
- React.createElement(
- "div",
- null,
- "This is valid HTML & JSX at the same time."
- );
JSX 移除一行开头和结尾的空格
JSX Children
支持内嵌 JSX 元素作为孩子. 在嵌套组件中很有用.
React 组件也返回数组元素. return [, ,];
JS expression 也可以作为孩子.
- function Item(props) {
- return <li>hello, {props.message}</li>; //props.children
- }
- function TodoList() {
- const todos = ['finish', 'submit', 'review'];
- return (
- <ul>
- // 这个是函数作为 props.children.
- {todos.map(message =>
- <Item key={message} message={message} />
- )}
- </ul>
- );
- }
- Function as Children
见标黄的代码. React.createElement(component, props,...child)
- 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}>{index}:This is item {index}</div>}
- </Repeat>
- );
- }
Booleans, Null, and Undefined are Ignored.
false ,null, undefined, true 都是验证的孩子, 不过它们不渲染.
所以可以作为条件判断 condition && expression.
如果 showHeader 是 true 则渲染 < Header />
- <div>
- {showHeader && <Header />}
- <Content />
- </div>
?? 0 会被渲染
如果要让 true 渲染使用类型转换, String().
- 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>;
- }
- z
来源: http://www.bubuko.com/infodetail-2576843.html