深入JSX
本质上来讲,JSX是为React.createElement方法提供的语法糖
<MyButton color="blue" shadowSize={2}> Click Me </MyButton>
编译为
React.createElement( MyButton, {color: 'blue', shadowSize: 2}, 'Click Me' )
点表示法用于JSX类型
const MyComponents = { DatePicker: function DatePicker(props) { return <div>Imagine a {props.color} datepicker here.</div>; } } function BlueDatePicker() { return <MyComponents.DatePicker color="blue" />; }
JSX的属性
使用JavaScript表达式作为属性
<MyComponent foo={1 + 2 + 3 + 4} />
字符串常量
<MyComponent message="hello world" /> <MyComponent message={'hello world'} />
属性默认为True
<MyTextBox autocomplete /> <MyTextBox autocomplete={true} />
展开属性,建议不要使用可能传递不必要的属性给组件
function App1() { return <Greeting firstName="Ben" lastName="Hector" />; } function App2() { const props = {firstName: 'Ben', lastName: 'Hector'}; return <Greeting {...props} />; }
JSX中的子代
字符串子面量
<MyComponent>Hello world!</MyComponent>
JavaScript表达式
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> ); }
布尔,Undefined,Null会被忽略
<div> {showHeader && <Header />} <Content /> </div>