React学习笔记，四 条件渲染与列表渲染
一、条件渲染
1、条件渲染
在 React 中，我们可以通过创建不同的组件封装不同的行为，然后根据应用的状态渲染对应状态下的部分内容
// 定义组件封装登陆行为
class SignIn extends React.Component {
constructor(props) {
super(props)
}
render() {
return <h1>Please Sign In</h1>
}
}
// 定义组件封装注册行为
class SignUp extends React.Component {
constructor(props) {
super(props)
}
render() {
return <h1>Please Sign Up</h1>
}
}
// 根据用户是否已经登陆决定渲染哪个组件
class Greeting extends React.Component {
constructor(props) {
super(props)
}
render() {
if (this.props.isSignUp) {
return <SignIn />
} else {
return <SignUp />
}
}
}
ReactDOM.render(
<Greeting isSignUp={false} />,
document.getElementById('app')
);
2、阻止组件渲染
在某些情况下，我们希望可以隐藏元素，这时候我们需要让 render() 返回 null 即可
class Warning extends React.Component {
constructor(props) {
super(props)
}
render() {
if (this.props.isWaring) {
return <span>Waring!</span>
} else {
return null
}
}
}
ReactDOM.render(
<Warning isWarning={false}/>,
document.getElementById('app')
);
3、元素变量
我们可以使用变量储存元素，使得我们可以有条件地渲染组件的一部分
class LoginControl extends React.Component {
constructor(props) {
// 1、传递 props
super(props);
// 2、初始 state
this.state = {isLoggedIn: false};
// 3、为事件处理函数绑定组件实例
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
// 使用变量根据条件储存元素
let greeting;
let button;
if (this.state.isLoggedIn) {
greeting = <h1>Now you are logged in!</h1>;
button = <button onClick={this.handleLogoutClick}>Log Out</button>;
} else {
greeting = <h1>Please log in!</h1>;
button = <button onClick={this.handleLoginClick}>Log In</button>;
}
return (
<div>
{greeting}
{button}
</div>
);
}
}
ReactDOM.render(
<LoginControl isLoggedIn={false} />,
document.getElementById('app')
);
二、列表渲染
1、渲染元素
在 React 组件中，我们可以通过 map() 方法快速渲染列表元素，我们先来看一个小例子
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone"></script>
</head>
<body>
<div ></div>
<script type="text/babel">
class ItemList extends React.Component {
render() {
const numbers = [1, 2, 3, 4, 5]
const items = numbers.map((number)=>(<li>{ number }</li>))
return (<ul>{ items }</ul>)
}
}
ReactDOM.render(
<ItemList />,
document.getElementById('app')
);
</script>
</body>
</html>
2、key 属性
在上面的例子中，虽然可以正常显示元素，但是当我们打开控制台的时候，会看到有一条警告信息
Warning: Each child in a list should have a unique "key" prop.
我们可以通过给每个列表元素分配一个 key 属性来解决上面这个问题
class ItemList extends React.Component {
render() {
const numbers = [1, 2, 3, 4, 5]
const items = numbers.map((number)=>(
<li key={ number.toString() }>
{ number }
</li>
))
return (
<ul>{ items }</ul>
)
}
}
一个元素的 key 最好是这个元素在列表中拥有的独一无二的字符串，万不得已的情况下也可以使用元素索引
class ItemList extends React.Component {
render() {
const numbers = [1, 2, 3, 4, 5]
const items = numbers.map((number, index)=>(
<li key={ index }>
{ number }
</li>
))
return (
<ul>{ items }</ul>
)
}
}
如果列表项目的顺序会发生改变，那么不建议使用索引作为 key，因为这样可能会导致性能问题，甚至会引起组件状态的问题
在默认的情况下，即我们没有显式指定 key 时，React 将使用索引作为列表项目的 key
3、渲染组件
除了可以使用 map() 方法渲染多个元素，还可以使用 map() 渲染多个组件，请看一个例子
class TodoItem extends React.Component {
constructor(props) {
super(props)
}
render() {
return ( <h3>{ this.props.title }</h3> )
}
}
class TodoList extends React.Component {
constructor(props) {
super(props)
this.state = {
itemList: [
{id: 0, title: 'Say Hello', isDone: true},
{id: 1, title: 'Say Goodbye', isDone: false}
]
}
}
render() {
const todoItemList = this.state.itemList.map((item) => {
if (!item.isDone) {
return ( <li key={ item.id }><TodoItem title={ item.title } /></li> )
}
})
return ( <ul>{ todoItemList }</ul> )
}
}
ReactDOM.render(
<TodoList />,
document.getElementById('app')
)
【 阅读更多 React 系列文章，请看 React学习笔记 】