react基本属性和 css类名的绑定

一嘴一个橘子

已于 2024-03-21 10:48:53 修改

阅读量194

点赞数 2

分类专栏： react.js 文章标签： react.js

于 2024-03-21 10:46:49 首次发布

本文链接：https://blog.csdn.net/pig_ning/article/details/136901265

版权

react.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React</title>
  <script src="./lib/react-development.js"></script>
  <script src="./lib/react-dom-development.js"></script>
  <script src="./lib/babel-min.js"></script>
</head>


<body>
  <div id="app"></div>
</body>


<script type="text/babel">
  class App extends React.Component {
    constructor() {
      super()
      this.state = {
        title: '哈哈哈',
        img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        href: 'https://www.baidu.com',
        isActive: true,
        objStyle: { color: 'red', fontSize: '14px' }
      }
    }

    render() {
      const { title, img, href, isActive, objStyle } = this.state

      // `需求：isActive为true时，绑定类名active`
      
      // `绑定class：字符串模式`
      const className = `c1 c2 ${isActive ? 'active' : ''}`
      
      // `绑定class：数组模式`
      const classList = ['c1', 'c2']
      if (isActive) classList.push('active')
      
	    // `使用第三方库classNames（npm i classNames）`这个后边说

      return (
        <div>
          `1、基本属性的绑定`
          <h2 title={title}> 我是h2元素 </h2>
          <img src={img} alt="" />
          <a href={href}> 打开百度 </a>

{ /* ------------------------------------------------------------------ */ }

          { /* `绑定class：基本模式` */ }
          <h2 className="c1 c2"> 哈哈哈哈哈哈 </h2>
	
          { /* `绑定class：字符串模式` */ }
          <h2 className={className}> 嘎嘎嘎嘎 </h2>

          { /* `绑定class：数组模式` */ }
          <h2 className={classList.join(' ')}>嘎嘎嘎嘎</h2>

{ /* ------------------------------------------------------------------ */ }

         { /* `绑定 style 方式一：这里的第一个{}，表示，它里面写的是js代码` */ }
          <p style={{ color: "red", fontSize: "14px" }}>黑黑黑黑黑黑</p>

          { /* `绑定 style 方式二` */ }
          <p style={objStyle}>呵呵呵呵呵呵</p>
        </div>
      )
    }
  }

  const root = ReactDOM.createRoot(document.querySelector('#app'))
  root.render(<App />)

</script>
</html>