まず、条件のレンダリング
1、条件のレンダリング
リアクトでは、我々は、パッケージの異なるコンポーネントの異なる振る舞いを作成することができますし、アプリケーションの状態に応じた状態の対応する部分をレンダリング
// 定义组件封装登陆行为
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、要素のレンダリング
アセンブリリアクトでは、私たちができる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 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、キー属性
上記の例では、表示素子が正常であることができますが、私たちは、コンソールの電源を入れたときに警告メッセージが表示されますとき
visual basic 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>
)
}
}最高のは、この要素の重要な要素は、要素のインデックスを使用することができ、最後の手段として、リスト内で一意の文字列を持っています
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>
)
}
}リスト項目の順序が変更される場合、この問題は、パフォーマンス上の問題を引き起こし、さらにはコンポーネントの状態につながる可能性があるので、キーとしてインデックスを使用することは推奨されません
デフォルトの場合、つまり、我々は明示的にキープロジェクトリストとしてインデックスを使用しますが、キーを指定して反応しません
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')
)[見て、一連の記事に反応続きを読む研究ノートに反応 ]