JSX属性
.
操作符在JSX中的应用
如果一个模块
export
出去多个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" />;
}
用户自定义的组件标签必须以大写字母开头
防止和HTML原有的标签重名。
不能使用[]
当对象的属性是变量的时候,我们通常使用
[]
来获取属性值,但是JSX中不支持这种表达式。要想获取到相应的组件,需要先用变量将组件获取到,然后再使用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} />;
}
import React from 'react';
import { PhotoStory, VideoStory } from './stories';
const components = {
photo: PhotoStory,
video: VideoStory
};
function Story(props) {
// Correct! JSX type can be a capitalized variable.
const SpecificStory = components[props.storyType];
return <SpecificStory story={props.story} />;
}
JSX属性值
- 可以使用javascript表达式:
你可以使用javascript表达式作为JSX的属性值。只要包在
{}
中即可:
<MyComponent foo={1 + 2 + 3 + 4} />
对于
MyComponent
,属性props.foo
的值为10
。因为这是1+2+3+4
的执行结果。但是
if
语句和for
循环这种并不是javascript
表达式。但是你可以在外面使用它们,达到想要的效果。
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>;
}
- 字符串
字符串有两种书写方式:
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />
你可以直接设置属性,因为HTML的属性默认是字符串类型的,所以两种是等价的。
<MyComponent message="<3" />
<MyComponent message={'<3'} />
- boolean值的属性
属性值默认是
true
,所以有以下两种表达方式:
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
- 解构赋值属性
如果属性全都包含在一个对象里面,这时候你想传入到JSX
中,你可以使用...
传入。以下两种写法等价:
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
你也可以挑选对象里面的一些属性处理过后再传入部分到
JSX
中:
const Button = props => {
const { kind, ...other } = props;
const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
return <button className={className} {...other} />;
};
const App = () => {
return (
<div>
<Button kind="primary" onClick={() => console.log("clicked!")}>
Hello World!
</Button>
</div>
);
};