React 基础巩固(八)——JSX 的属性绑定

JSX 绑定属性

• 例如元素的 title、class，img 的 src，a 的 href，原生的 style…

<script type="text/babel">
  // 1.创建root
  const root = ReactDOM.createRoot(document.querySelector("#root"));

  // 2.封装App组件
  class App extends React.Component {
    // 组件数据
    constructor() {
      super();
      this.state = {
        message: "hello world",
        imgURL:
          "https://img1.baidu.com/it/u=1919509102,1927615551&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1687194000&t=186d932419457da247c1bec4a9b1b25e",
        href: "https://www.baidu.com",
        isActive: true,
      };
    }

    // 渲染内容
    render() {
      const { message, imgURL, href, isActive } = this.state;
      const className = `box-a box-b ${isActive ? "active" : ""}`;
      const classList = ["box-a", "box-b"];
      if (isActive) classList.push("active");

      return (
        <div>
          {/* 1. 绑定基本属性 */}
          <h2 title={message}>{message}</h2>
          <img src={imgURL} alt="" />
          <a href={href}>百度</a>

          {/* 2. 绑定class属性: 最好使用ClassName */}
          {/* 字符串拼接 */}
          <h2 className={`box-a box-b ${isActive ? "active" : ""}`}>
            绑定class属性1
          </h2>
          <h2 className={className}>绑定class属性2</h2>
          {/* class数组 */}
          <h2 className={classList.join(" ")}>绑定class属性3</h2>
          {/* 使用第三方库classnames npm install classnames */}

          {/* 3. 绑定style属性 */}
          <h2 style={{ color: "red" }}>绑定style</h2>
        </div>
      );
    }
  }

  // 3.渲染组件
  root.render(<App />);
</script>