条件渲染
元素变量:
创建一个名为LoginControl的有状态组件或还有
<!-- LoginControl 组件,在这个组件里进行渲染-->
class LoginControl extends React.Component{
constructor(props){
super(props);
<!--前边只是起个名字-->
this.handleLoginClick=this.handleLoginClick.bind(this);
this.test=this.handleLogoutClick.bind(this);
this.state = {isLoggedIn:false};
}
<!--登录-->
handleLoginClick(){
this.setState({isLoggedIn:true});
}
<!--退出登录-->
handleLogoutClick(){
this.setState({isLoggedIn:false});
}
render(){
const isLoggedIn = this.state.isLoggedIn;
let button;
if(isLoggedIn){
button = <LogoutButton onClick={this.test} />
}else{
button = <LoginButton onClick={this.handleLoginClick} />
}
return(
<div>
<Greeting isLoggedIn={isLoggedIn}/>
{button}
</div>
)
}
}
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
// 新增两个组件 : loginbutton logoutbutton
function LoginButton(props){
return (
<button onClick={props.onClick}>Login</button>
)
}
function LogoutButton(props){
return (
<button onClick={props.onClick}>Logout</button>
)
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<LoginControl />,
document.getElementById('root')
);
<!--详细内容看笔记本-->
与运算符&&
true && expression 总是返回expression 而false && expression 返回false
例子:
function Mailbox(props){
const UnReadMessage = props.UnReadMessage;
return(
<div>
<!--这里这里-->
<h1>Hello!</h1>
{
UnReadMessage.length > 0 &&
<h2>
you have {UnReadMessage.length} unread message
<h4>they are {UnReadMessage+" " }</h4>
</h2>
}
</div>
)
}
const message = ['test1','test2']
ReactDOM.render(
<Mailbox UnReadMessage={message} />,
document.getElementById('root')
);
三目运算符
condition ? true : false
注意易读性
阻止组件渲染
- 在下面的例子中, 根据属性 warn 的值条件渲染。如果 warn 的值是 false,则组件不会渲染:
function WarningBanner(props){
const warn = props.warning;
if(!warn){
return null;
}
return(
<div>WARNING</div>
)
}
class Page extends React.Component{
constructor(props){
super(props);
this.state = {isWarning:true};
this.anniu = this.warningClick.bind(this);
}
warningClick(){
this.setState(prevState=>({
isWarning:!prevState.isWarning
}))
}
render(){
return(
<div>
<WarningBanner warning={this.state.isWarning} />
<button onClick={this.anniu}>{this.state.isWarning?'hide':'show'}</button>
</div>
)
}
}
ReactDOM.render(
<Page />,
document.getElementById('root')
);
组件的render方法返回null并不会影响该组件生命周期方法的回调。
##列表 && keys
列表组件开始之前复习一下: map filter
- map :映射,原数组被映射成对应的新数组。
- filter :过滤,返回过滤后的数组,过滤的条件卸载函数里,最终的结果是复合过滤的条件的
列表
<!--筛选出zhang开头的邮件-->
.filter(function(email) { return /^zhang/.test(email); });
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) => //语句多于一句时,使用花括号括起来加return
<li>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
keys
Keys可以在DOM中某些元素被增加或删除时帮助React识别哪些元素发生了变化。通常使用来自数据的id作为元素的key.当元素没有确定的id时,可以使用它的序列号索引index作为key
用keys 提取组件
function ListItem(props) {
// 对啦!这里不需要指定key:
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 又对啦!key应该在数组的上下文中被指定
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
注意:元素位于map 方法内时需要设置key