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 进行循环对应的数据，然后组装返回对应的元素即可完成列表渲染。
