1、props是js表达式。mqs易塔云建站-模板下载,web开发资源,技术博客mqs易塔云建站-模板下载,web开发资源,技术博客你可以把包裹在 {} 中的 JavaScript 表达式作为一个 prop 传递给 JSX 元素。例如，如下的 JSX：
<MyComponent foo={1 + 2 + 3 + 4} />
在
MyComponent 中，
props.foo 的值等于
1 + 2 + 3 + 4 的执行结果
10。
mqs易塔云建站-模板下载,web开发资源,技术博客mqs易塔云建站-模板下载,web开发资源,技术博客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>;
} 2、props是字符串字面量。
<MyComponent message="hello world" />
<MyComponent message={'hello world'} /> 当你将字符串字面量赋值给 prop 时，它的值是未转义的。所以，以下两个 JSX 表达式是等价的：
<MyComponent message="<3" />
<MyComponent message={'<3'} /> 3、props的默认值是true。mqs易塔云建站-模板下载,web开发资源,技术博客mqs易塔云建站-模板下载,web开发资源,技术博客如果你没给 prop 赋值，它的默认值是 true。以下两个 JSX 表达式是等价的：
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} /> 4、props的属性将要展开。mqs易塔云建站-模板下载,web开发资源,技术博客mqs易塔云建站-模板下载,web开发资源,技术博客如果你已经有了一个 props 对象，你可以使用展开运算符 ... 来在 JSX 中传递整个 props 对象。以下两个组件是等价的：
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
} 你还可以选择只保留当前组件需要接收的 props，并使用展开运算符将其他 props 传递下去。
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>
);
};
