JSX 灵活性
- JSX 使我们在 JS 中拥有了直接编写 XML 代码的能力
- 所以在 JS 中能干的事, 在 JSX 中都能干
例如有如下这么一个需求：通过按钮控制界面上 p 标签的显示和隐藏：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../react17/react.development.v17.js"></script>
<script src="../react17/react-dom.development.v17.js"></script>
<script src="../react17/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Home extends React.Component {
constructor() {
super();
this.state = {
flag: true
}
}
render() {
return (
<div>
<p style={{display: this.state.flag ? 'block' : 'none'}}>我是段落</p>
<button onClick={this.myFn}>按钮</button>
</div>
)
}
myFn = () => {
this.setState({
flag: !this.state.flag
})
}
}
ReactDOM.render(<Home/>, document.getElementById('app'));
</script>
</body>
</html>
博主的实现代码如上，因为在 {} 中的内容与 JS 的内容一样，所以可以在当中进行编写逻辑的分支代码，来控制样式，通过观察发现，如上的实现和 Vue 中的 v-show 指令很像，其实除了通过 JSX 实现 Vue 当中 v-show 一样的指令功能以外，还可以实现 Vue 当中的 v-if 指令，如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../react17/react.development.v17.js"></script>
<script src="../react17/react-dom.development.v17.js"></script>
<script src="../react17/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Home extends React.Component {
constructor() {
super();
this.state = {
flag: true
}
}
render() {
return (
<div>
{this.state.flag && <p>我是段落</p>}
<button onClick={this.myFn}>按钮</button>
</div>
)
}
myFn = () => {
this.setState({
flag: !this.state.flag
})
}
}
ReactDOM.render(<Home/>, document.getElementById('app'));
</script>
</body>
</html>
渲染表格列表
在企业开发当中经常会有这么一个需求，就是将后端返回过来的实现进行表格列表展示出来那么在 JSX 当中该如何进行渲染呢，这个知识点就是博主现在要介绍的内容，那么废话不多说，直接上代码吧：
<script type="text/babel">
class Home extends React.Component {
constructor() {
super();
this.state = {
names: ['鲁班', '虞姬', '黄忠']
}
}
render() {
const {names} = this.state;
return (
<div>
<ul>
{
names.map(name => {
return <li>{name}</li>
})
}
</ul>
</div>
)
}
myFn = () => {
this.setState({
flag: !this.state.flag
})
}
}
ReactDOM.render(<Home/>, document.getElementById('app'));
</script>
如上代码其实就是介绍了一个通过 map 进行循环对应的数据，然后组装返回对应的元素即可完成列表渲染。