react格式规范

初级学习react记录

class动态属性绑定

1. 字符串拼接
2. push到数组中
3. 使用第三方库classnames npm i classnames

      render() {
        const { isActive } = this.state;
        // class写法1
        const className1 = `aaa bbb ${isActive ? "ccc" : ""}`;

        // class写法2
        let className2 = ["aaa", "bbb"];
        if (isActive) className2.push("ccc");
        return (
          <div className={className1}>
            <div className={className2.join(" ")}></div>
          </div>
        );
      }

相同逻辑代码写到函数中

      getMovies() {
        //相同逻辑封装到函数里
        const liEls = this.state.movies.map((item) => {
          return <li>{item}</li>;
        });
        return liEls;
      }
      render() {
        return 
            <ul>
             {this.getMovies()}
            </ul>
      }