React 第七章条件渲染

根据条件渲染不同组件，可以实现组件的显示与隐藏。

第一种：在函数内部通过属性props条件的判断，返回不同的组件，进行控制显示隐藏。如果返回null则表示不展示隐藏。

//1，条件渲染
function UserGreeting(props) {return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {return <h1>Please sign up.</h1>;
}
//通过if判断返回不同的组件进行展示渲染
function Greeting(props){const isLogin = props.isLoggedIn;if(isLogin){return <UserGreeting />;}else{return <GuestGreeting />;}
}
ReactDOM.render(<Greeting isLoggedIn={true} />,document.getElementById('root'));

第二种：通过改变内部state进行重新执行render渲染函数，进行控制组件的显示与隐藏，和上面的例子一样都是在函数内部通过变量判断进行控制。

//2，使用组件内状态state
function LoginButton(props){console.log(props);return (<button onClick={props.onClick}>登录</button>);
}function LogOutButton(props){console.log(props);return (<button onClick={props.onClick}>退出</button>);
}
//通过更改state以及三目运算符 动态更新页面组件 state以变则会调用render函数
class LoginControl extends React.Component{constructor(props){super(props);this.state={isLoggind:false};}buttonClick = () =>{this.setState({isLoggind:!this.state.isLoggind});}render(){const isLoggind = this.state.isLoggind;//这里将click函数传递给了按钮组件，在按钮组件内的button onClick事件中进行了触发调用。const button = isLoggind ? <LogOutButton onClick={this.buttonClick} /> : <LoginButton onClick={this.buttonClick} />return(<div><Greeting isLoggedIn={isLoggind} />{button}</div>)}
}ReactDOM.render(<LoginControl />,document.getElementById('root'));

第三种：通过在大括号内部使用 &&与运算符或者三目运算符进行控制组件是否显示与隐藏

//3，在大括号中使用&& 运算符
function SeyHello(props){return (<h1>{props.name && "hello"+props.name }</h1>    );
}
function SeyHello2(props){return (<h1>{props.name ? "hello"+props.name :"没人"}</h1> );
}ReactDOM.render(<SeyHello name="zhang san" />,document.getElementById('root'));

React 第七章条件渲染相关推荐

React:Conditional Rendering（条件渲染）
就像JS中常常会根据条件(比如if/else.switch)返回不同的值,React中也可以根据组件的状态或其他参考条件返回不同的React Element. 比如根据用户是否登陆渲染对应的UI面板. ...
web前端高级React - React从入门到进阶之React条件渲染
系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染 ...
react把表格渲染好ui_在React中实现条件渲染的7种方法
借助react,我们可以构建动态且高度交互的单页应用程序,充分利用这种交互性的一种方法是通过条件渲染. 条件渲染一词描述了根据某些条件渲染不同UI标签的能力.在react文档中,这是一种根据条件渲染不 ...
react 条件渲染
在 React 中,你可以创建不同的组件来封装各种你需要的行为.然后还可以根据应用的状态变化只渲染其中的一部分. React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript ...
[react] 写个例子说明什么是JSX的内联条件渲染
[react] 写个例子说明什么是JSX的内联条件渲染 ifTrue ? <ComA /> : <ComB>ifTrue && <ComC/> 个人 ...
NLP复习资料(3)-六~七章：马尔科夫模型与条件随机场、词法分析与词性标注
NLP复习资料 1.第六章马尔科夫模型与条件随机场 2.第七章词法分析与词性标注国科大,宗老师<自然语言处理>课程复习笔记,个人整理,仅供参考. 1.第六章马尔科夫模型与条件随机场 ...
React条件渲染列表渲染
一.React条件渲染某些情况下,界面的内容会根据不同的情况显示不同的内容,或者决定是否渲染某部分内容: 在vue中,我们会通过指令来控制:比如v-if.v-show: 在React中,所有的条件判 ...
react把表格渲染好ui_react 入坑笔记（五） - 条件渲染和列表渲染
条件渲染和列表渲染一.条件渲染条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...
angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例...
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){this.state{msg:"双向数据绑定" ...

React 第七章条件渲染

React 第七章条件渲染相关推荐

最新文章

热门文章

React 第七章 条件渲染

React 第七章 条件渲染相关推荐

最新文章

热门文章

React 第七章条件渲染

React 第七章条件渲染相关推荐