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