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/>)
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/>)
// 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/>)
绑定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/>)