function App(){
let msg = 'react 的插值';
return (
{msg}
)
}
jsx中也可以绑定属性,绑定属性时不能加引号
function App(){
let url= 'https://baikebcs.bdimg.com/baike-react/common/logo-baike.svg';
return (
)
}
jsx中也支持一些简单的js运算, 也支持条件运算符(react 的条件渲染方式之一
function App(){
let count = 10;
return (
{ 1 + 1}
{count * 10}
)
}
jsx中也可以使用es6的模板字符串, 支持字符串拼接操作
function App(){
let count = 10;
let msg = '新的一年';
return (
{`${count} hello`}
{msg + '美妙人生'}
)
}
在编译之后,JSX会被转化为普通的JavaScript对象。所以可以在if或者for语句里使用JSX,将它赋值给变量,当作参数传入,作为返回值都是允许的:
function App(){
let count = 10;
let ele ;
// 变相的react的条件渲染
if(count > 10){
ele = (《哪吒2》)
}else {
ele =
《唐探1900》
}
return (
{ele}
)
}
React 没有特殊的语法来编写条件语句,因此你使用的就是普通的 JavaScript 代码。例如使用 if
语句根据条件引入 JSX: if语句工作与JSX的外部, 即函数式组件的顶层作用域中, return 返回的模板就是jsx语法
function App(){
let content;
if (isLoggedIn) {
content = ;
} else {
content = ;
}
return (
{content}
);
}
如果你喜欢更为紧凑的代码,可以使用 条件 ? 运算符。与 if
不同的是,它工作于 JSX 内部:
function App(){
return (
{isLoggedIn ? (
) : (
)}
)
}
当你不需要 else
分支时,你还可以使用 逻辑 && 语法:
function App(){
let isLoggedIn = true;
return (
{isLoggedIn && }
)
}
React 中的列表渲染推荐使用的是数组的map() 方法; react中列表渲染也需要绑定key值;
对于列表中的每一个元素,你都应该传递一个字符串或者数字给 key
,用于在其兄弟节点中唯一标识该元素。通常 key 来自你的数据,比如数据库中的 ID。如果你在后续插入、删除或重新排序这些项目,React 将依靠你提供的 key 来思考发生了什么。
使用 map()
函数将这个数组转换为 <标签名>
标签构成的html结构:
function App(){
const products = [
{ title: 'Cabbage', id: 1 },
{ title: 'Garlic', id: 2 },
{ title: 'Apple', id: 3 },
];
const listItems = products.map(product =>
{product.title}
);
return (
{listItems }
)
}
也可以直接在jsx中使用map()方法进行渲染
function App(){
const products = [
{ title: 'Cabbage', id: 1 },
{ title: 'Garlic', id: 2 },
{ title: 'Apple', id: 3 },
];
return (
{
products.map(product =>
-
{product.title}
);
}
)
}