条件渲染
判断条件一定是 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"));
