JSX属性绑定

  1. <script src="format_utils.js"></script>
  3.   <script type="text/babel">
  4.     class App extends React.Component {
  5.       constructor(){
  6.         super()
  7.         this.state = {
  8.           title: '标题',
  9.           imgUrl: 'https://p1.music.126.net/gacBlG1n5qDYaheqsemMNA==/3250156380424409.jpg',
  10.           link: 'https://www.baidu.com',
  11.           active: true
  12.         }
  13.       }
  15.       render(){
  16.         const {title, imgUrl, link, active} = this.state
  17.         return (
  18.           <div>
  19.             {/* 1.绑定普通属性 */}
  20.             <h2 title={title}>标题</h2>
  21.             <img src={getImgUrl(imgUrl)} alt="" />
  22.             <a href={link} target="_blank">百度</a>
  24.             {/* 2.绑定class */}
  25.             <div className={"box title " + (active ? "active" : "")}>我是div</div>
  26.             <label htmlFor=""></label>
  28.             {/* 3.绑定style */}
  29.             <div style={{color: 'red', fontSize: "50px"}}>我是div</div>
  30.           </div>
  31.         )
  32.       }
  33.     }
  35.     ReactDOM.render(<App />, document.querySelector('#app'))
  36. </script>

视频 03 第 33 分钟