React基础-JSX动态绑定属性的方式

JSX绑定属性

某些元素的属性值可能会需要动态绑定一个变量, 接下来我们一起学习一下如何为元素动态的绑定属性值

基本属性绑定

比如元素都会有title属性

比如img元素会有src属性

比如a元素会有href属性

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      title: "哈哈哈",
      imageUrl: "https://img.zcool.cn/community/013b265b0be020a8012043d868d4ae.jpg@1280w_1l_2o_100sh.jpg",
      aHref: "http://www.baidu.com",

    }
  }

  render() {
    const { title, imageUrl, aHref } = this.state

    return (
      <div>
        {/* 绑定全局title属性 */}
        <h2 title={title}>我是标题</h2>  
        {/* 绑定图片src属性 */}
        <img src={imageUrl} alt="" />
        {/* 绑定a元素的href属性 */}
        <a href={aHref}>百度一下</a>
      </div>
    )
  }
}

const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

class属性绑定

某些元素可能需要绑定class, 绑定class属性的方式是很多的, 这里暂时讲两种方式, 还有第三种方式是通过第三方库进行绑定, 在后续的文章中会进行讲解

注意: 在React中绑定class属性, 直接写class属性React虽然可以识别, 但是会报一个警告, 最好使用className来绑定

• 需求根据变量isActive的值动态的在原有的类的基础上再添加一个class

// class绑定写法一
class App extends React.Component {
  constructor() {
    super()

    this.state = {
      isActive: true
    }
  }

  render() {
    const { isActive } = this.state
		// 将原来的类和动态决定的类做一个拼接
    const className = `aaa bbb ${isActive? "active" : ""}`

    return (
      <div>
        {/* 绑定class属性 */}
        <h2 className={className}>哈哈哈哈</h2>
      </div>
    )
  }
}

const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// class绑定写法二
class App extends React.Component {
  constructor() {
    super()

    this.state = {
      isActive: true
    }
  }

  render() {
    const { isActive } = this.state
    // 先将原来的类放入一个数组, 再又if语句决定是否像数组添加active类
    const classList = ["aaa", "bbb"]
    if (isActive) classList.push("active")

    return (
      <div>
        {/* 由于数组会默认以逗号连接, 因此绑定class属性需要调用join方法, 让它们以空格拼接 */}
        <h2 className={classList.join(" ")}>哈哈哈哈</h2>
      </div>
    )
  }
}

const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

绑定style属性

动态添加内联样式style

动态绑定style属性时注意:

• 花括号中需要写一个对象类型, 例如下面代码中, 双花括号并不是代码Vue中的插值语法, 第二个花括号是表示一个对象
• 例如font-size属性时由短横线连接的, 在jsx中不支持, 需要写成fontSize驼峰标识

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      objStyle: {color: "red", fontSize: "30px"}
    }
  }

  render() {
    const { objStyle } = this.state

    return (
      <div>
        {/* 3.绑定style属性 */}
        <h2 style={{color: "red", fontSize: "30px"}}>呵呵呵呵</h2>
        <h2 style={objStyle}>呵呵呵呵</h2>
      </div>
    )
  }
}

const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24