First, the conditions rendering
1, the conditions rendering
In React, we can create different behaviors of the different components of the package, and then render the corresponding part of the state according to the state of the application
// 定义组件封装登陆行为
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, to prevent the component rendering
In some cases, we would like to hide elements, this time we need to render()return nullto
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, the variable element
We can use variables to store elements so that we can conditionally render part of the assembly
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')
);Second, rendering list
1, render elements
In React assembly, we can map()quickly render a list element method, we first look at a small example
<!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 id="app"></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 attributes
In the above example, although the display elements can be normal, but when we turn on the console when will see a warning message
visual basic Warning: Each child in a list should have a unique "key" prop.
We can assign to each element of a list keyto solve the above problem property
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>
)
}
}The best is a key element of this element has a unique string in the list, as a last resort can also use the element index
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>
)
}
}If the order of the list items will change, it is not recommended to use the index as a key, because this problem may cause performance problems, and even lead to component status
In the case of default, that is, we do not explicitly specify the key, React will use the index as a key project list
3, rendering components
In addition to using the map()method of rendering a plurality of elements, may also be used map()to render a plurality of components, an example see
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')
)[Read More React series of articles, look React study notes ]