JSX的常用语法使用

什么是 JSX?

JSX 是 js 的语法扩展，允许在 js 中编写 html 代码，是 2013 年 伴随 React 库的首次发布而出现，并简化了用户界面的开发过程和提高代码的可读性及维护性

例如🌰

Copy
// 不使用 JSX 的 React 代码
const element = React.createElement('h1', { className: 'title' }, 'Hello, world!');

// 使用 JSX 的 React 代码
const element = Hello, world! ;

Tip

JSX 比 HTML 更加严格。你必须闭合标签，如 。你的组件也不能返回多个 JSX 标签。你必须将它们包裹到一个共享的父级中，比如 ... 或使用空的 <>...</> 包裹：

Copy
function Hello() {
return (
<>
Hello, world!
</>
);
}

在 JSX 中嵌入表达式

Copy
const name = '张三';
const fn = () => alert('fn函数')

const App = () => {
return (
<>
{ name }
{ fn() }
{ new Date().toLocaleString() }
</>
);
};

在 JSX 中添加属性

Warning

由于 JSX 比 HTML 更接近 JavaScript，因此 React DOM 使用驼峰式属性命名约定而不是 HTML 属性名称。
例如，class 在 JSX 中变为 className，tabindex 变为 tabIndex。

Copy
const user = {
className: 'avatar-img',
imageUrl: 'https://www.gravatar.com/avatar/0?d=mp',
style: {
border: '2px solid red',
borderRadius: '50%',
}
}

const App = () => {
return (
<>

</>
);
};

在 JSX 中绑定事件

使用 tsx 绑定事件 on[Click]{ fn } 小驼峰 其他事件也是一样的。如果需要传递参数可以使用 on[Click]{ () => fn() }

Copy
const clickFn = (name) => {
console.log('clicked', name);
}
const mouseEnterFn = () => {
console.log('mouse entered');
}
const mouseLeaveFn = () => {
console.log('mouse leveled');
}

const App = () => {
return (
<>
Hello, world!
clickFn('button')} onMouseEnter={mouseEnterFn} onMouseLeave={mouseLeaveFn}>Click me
</>
);
};

在 JSX 中条件渲染

Copy
const flag = true;

const App = () => {
return (
<>
{ flag ? 真的 : 假的 }
</>
);
};

当你不需要 else 分支时，你也可以使用更简短的 逻辑 && 语法：

Copy

{isLoggedIn && <AdminPanel />}


更复杂的判断逻辑可以写在一个函数里面

Copy
const messageTip = (code) => {
switch (code) {
case 200:
return Success ;
case 404:
return Error ;
default:
return Info ;

}
}
const App = () => {
return (
<>
{ messageTip(200) }
</>
);
};

在 JSX 中遍历元素

使用 map 遍历返回 html 标签

Copy
const userList = [
{ id: 1, name: '张三', age: 18, gender: '男' },
{ id: 2, name: '李四', age: 19, gender: '女' },
{ id: 3, name: '王五', age: 20, gender: '男' },
{ id: 4, name: '赵六', age: 21, gender: '女' },
{ id: 5, name: '钱七', age: 22, gender: '男' },
{ id: 6, name: '孙八', age: 23, gender: '女' },
{ id: 7, name: '周九', age: 24, gender: '男'},
]
const App = () => {
return (
<>
{ userList.filter(user => user.age > 20).map(user => {user.name} ) }
</>
);
};

在 JSX 中渲染 html 片段

Warning

使用 dangerouslySetInnerHTML 后元素不要添加内容，否则会出粗

Copy
const App = () => {
return (
<>
{/* 此处留空，否则会报错 */}
</>
);
};

常见问题

1、JSX 语句内只能使用表达式、不能使用语句和字面量等

Copy
// Error: Objects are not valid as a React child (found: object with keys {key}). If you meant to render a collection of children, use an array instead.
const element = { { key: 'value' } } ;

// ✅
const element = { JSON.stringify({ key: 'value' }) } ;

// ✅
const element = { { key: 'value' }.key } ;

2、TSX 如何使用泛型
正常写泛型语法会跟 tsx 语法冲突，他会把泛型理解成是一个元素，解决方案后面加一个 , 即可

Copy
const clickTap = <T,>(params: T) => alert(params)
const element = clickTap('张三')}>Click me ;