如何进行动态绑定

JSX 允许你在 JavaScript 中编写类似 HTML 的标签，这些标签都是静态的，当你需要动态的渲染数据或者动态的给标签添加属性时，则需要用到表达式。

可以在 JSX 的大括号 {} 内编写 JavaScript 表达式。

以双引号的静态绑定

目前标签中的属性都是通过双引号 "" 进行绑定的。

export default function Avatar() {
    return (
        <img
            className="avatar"
            src="https://i.imgur.com/7vQD0fPs.jpg"
            alt="Gregorio Y. Zara"
        />
    )
}

以变量形式的动态绑定

如果标签的属性值想要动态绑定，则需要使用大括号 {} 来包裹属性值。

注意

当使用大括号 {} 时，不能使用双引号 "" 来包裹。例如 src="{avatar}"

export default function Avatar() {
    const avatar = 'https://i.imgur.com/7vQD0fPs.jpg'
    const description = 'Gregorio Y. Zara'

    return <img className="avatar" src={avatar} alt={description} />
}

也支持模板语法渲染

export default function Avatar() {
    const title = 'Hello'

    return <div>{title} World</div>
}

以函数形式的动态绑定

除了变量形式以外，JSX 也支持以函数的形式进行动态绑定。例如绑定登录提交事件。

export default function Login() {
    const submit = () => {
        console.log('login')
    }

    return (
        <>
            <h1>登录模块</h1>
            <button onClick={submit}>登录</button>
        </>
    )
}

例如通过函数给数据进行处理。

const today = new Date()

function formatDate(date) {
    return new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(date)
}

export default function TodoList() {
    return <h1>To Do List for {formatDate(today)}</h1>
}

以对象形式的动态绑定

当需要绑定一个对象时，需要使用两层大括号 {{}}

注意

但是需要注意内联 style 属性，需要使用驼峰命名法编写。

<!-- 错误 -->
<ul style="background-color: black"></ul>

<!-- 正确 -->
<ul style={{ backgroundColor: 'black' }}></ul>

export default function TodoList() {
    return (
        <ul style={{ backgroundColor: 'black', color: 'pink' }}>
            <li>Improve the videophone</li>
            <li>Prepare aeronautics lectures</li>
            <li>Work on the alcohol-fuelled engine</li>
        </ul>
    )
}