<!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>
react基本属性 和 css类名 的绑定
于 2024-03-21 10:46:49 首次发布