React 列表渲染&条件渲染（3）

条件渲染

判断条件一定是 bool 类型才会渲染，false、null、undefined

class LoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      pwd: "",
    };
  }
  handleUserNameChange(e) {
    this.setState({
      username: e.target.value,
    });
  }
  handlePwdChange(e) {
    this.setState({
      pwd: e.target.value,
    });
  }
  login() {
    const { username, pwd } = this.state;
    // 通过 props 将用户信息传递给 父组件
    this.props.login(username, pwd);
  }
  render() {
    return (
      <div>
        <div>
          <span>用户名：</span>
          <input type="text" onChange={(e) => this.handleUserNameChange(e)} />
        </div>
        <div>
          <span>密码：</span>
          <input type="password" onChange={this.handlePwdChange.bind(this)} />
        </div>
        <button onClick={() => this.login()}>提交</button>
      </div>
    );
  }
}

class Welcome extends React.Component {
  render() {
    return (
      <div>
        <h1>欢迎登录</h1>
        <button onClick={() => this.props.logout()}>退出登录</button>
      </div>
    );
  }
}

class Tip extends React.Component {
  render() {
    const { tipShow } = this.props;
    if (!tipShow) {
      return null;
    }
    return <p>tip</p>;
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.state = { logged: false, tipShow: false };
  }
  login = (username, pwd) => {
    if (username === "123" && pwd === "123") {
      // 登录成功会重置信息
      this.setState({
        logged: true,
        tipShow: true,
      });
    }
  };
  logout = () => {
    this.setState({
      logged: false,
      tipShow: false,
    });
  };
  render() {
    const { logged, tipShow } = this.state;
    return !logged ? (
      <LoginForm login={this.login} />
    ) : (
      <div>
        <Welcome logout={this.logout} />
        <Tip tipShow={tipShow} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("#app"));

列表渲染

报错信息：Each child in a list should have a unique "key" prop.

原因：列表中每个子元素都必需一个唯一的 key 属性值

key 是 React 查看元素是否改变的一个唯一标识
key 必须在兄弟节点中唯一，确定的（兄弟结果是一个列表中的兄弟元素）

为什么不建议使用 `index` 作为 `key` 值？（建议在列表顺序不改变、元素不增删的情况下使用 `index`）

列表项增删或顺序改变了，index 的对应项就会改变，key 对应的项还是之前列表对应元素的值，导致状态混乱，查找元素性能就会变差

好的做法：如果列表是静态的，不可操作的，可以选择 index 作为 key，但也不推荐；很有可能这个列表在以后维护扩展的时候，有可能变更为可操作的列表

尽量避免使用 index
可以用数据的 ID （也有可能变化）
使用动态生成的静态 ID ：nanoid

import { nanoid } from "nanoid";

class ListTitle extends React.Component {
  render() {
    return (
      <thead>
        <tr>
          <td>Key</td>
          <td>id</td>
          <td>name</td>
        </tr>
      </thead>
    );
  }
}

class ListItem extends React.Component {
  render() {
    const { sid, item } = this.props;
    return (
      <tr>
        <td>{sid}</td>
        <td>{item.id}</td>
        <td>{item.name}</td>
      </tr>
    );
  }
}

class App extends React.Component {
  state = {
    arr: [
      {
        id: 1,
        name: "zs",
      },
      {
        id: 2,
        name: "zs2",
      },
      {
        id: 3,
        name: "zs3",
      },
      {
        id: 4,
        name: "zs4",
      },
      {
        id: 5,
        name: "zs5",
      },
    ],
  };
  render() {
    return (
      <table border={1}>
        <ListTitle />
        <tbody>
          {
            // 如果多层嵌套map的话，尽量把map结果抽离出子组件，提升性能
            this.state.arr.map((item) => {
            const sid = nanoid();
            // key 不会作为属性传递给子组件，必须显示传递 key 值
            // 原因：防止开发者在逻辑中对key值进行操作
            return <ListItem key={sid} sid={sid} item={item} />;
          })}
        </tbody>
      </table>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("#app"));