React的条件渲染

最新推荐文章于 2024-01-28 14:08:31 发布

新城大海

最新推荐文章于 2024-01-28 14:08:31 发布

阅读量116

点赞数

本文链接：https://blog.csdn.net/weixin_45664217/article/details/118715029

版权

react的条件渲染，并不像vue一样有v-if这个指令，所以实现的话，稍微复杂一些。
实现的方式 if判断可以，三目运算符也可以

全部代码`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React核心代码</title>
    <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
</head>
<body>
  <div id="app">
  </div>
  <!-- <button class="btn">点击</button> -->
  <script>
    // document.getElementsByClassName('btn')[0].addEventListener('click', (e)=> {
    //   console.log("dianjia.....")
    // })
  </script>
 <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
  class App extends React.Component {
    constructor (props) {
      super(props)
      this.state = {
        isLogin: true
      }
    }
    render () {
      let  { isLogin } = this.state
      return (
        <div>
          { isLogin ? <h2>登录成功</h2> : <h2>请登录</h2>}
          <button onClick={(e) => {this.btnClick()}}> {isLogin ? <h2>登录成功</h2> : <h2>请登录</h2>}</button>
          <hr/>
          <h2>{ isLogin ? '欢迎你的到来' : null}</h2>
          </div>
      )
    }
    btnClick () {
      let  { isLogin } = this.state
      this.setState({
        isLogin: !isLogin
      })
    }
  }
   ReactDOM.render(<App></App>, document.getElementById('app'))
  </script>
</body>
</html>

新城大海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React的条件渲染

react的条件渲染，并不像vue一样有v-if这个指令，所以实现的话，稍微复杂一些。实现的方式 if判断可以，三目运算符也可以全部代码`<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont.
复制链接

扫一扫