在JSX中可以通过 大括号语法 { } 识别JS中的表达式,比如常见的变量、函数调用、方法调用等等
1、使用引号传递字符串
2、使用JavaScript变量
3、函数调用和方法调用
(函数和方法本质没有区别,这里默认: 函数是自己定义的,方法是内置或第三方的)
4、使用JavaScript对象
注意:if 语句、switch 语句、变量声明属于语句,不是表达式,不能出现在 { } 中
使用示例:
const count = 100;
function getName() {
return 'zhangsan';
}
function App() {
return (
<div className="App">
this is App
{/* 使用引号传递字符串 */}
{'this is message'}
{/* 识别js变量 */}
{count}
{/* 函数(自己定义的)调用,直接展示函数的return值 */}
{getName()}
{/* 方法(内置的)调用 */}
{new Date().toLocaleString()}
{/* 使用js对象,一般在使用内联样式的时候使用 */}
<div style={{ color: 'red' }}>this is red</div>
</div>
);
}
export default App;