- 浏览: 2551681 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
nation:
你好,在部署Mesos+Spark的运行环境时,出现一个现象, ...
Spark(4)Deal with Mesos -
sillycat:
AMAZON Relatedhttps://www.godad ...
AMAZON API Gateway(2)Client Side SSL with NGINX -
sillycat:
sudo usermod -aG docker ec2-use ...
Docker and VirtualBox(1)Set up Shared Disk for Virtual Box -
sillycat:
Every Half an Hour30 * * * * /u ...
Build Home NAS(3)Data Redundancy -
sillycat:
3 List the Cron Job I Have>c ...
Build Home NAS(3)Data Redundancy
ReactJS(3)Handling Events - Conditional Rendering - List and Keys
Handling Events
function ActionLink(){ //component
function handleClick(e){
e.preventDefault(); // return false
console.log(’The link was clicked.');
}
return (
<a href=“#” onClick={handleClick}>Click Me</a>
);
}
Binding the event to this
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
Conditional Rendering
https://facebook.github.io/react/docs/conditional-rendering.html
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 />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={true} />,
document.getElementById('root')
);
let will limit the variable scope
http://cookfront.github.io/2015/05/28/es6-let-const/
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = 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 = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> );
}
}
Inline If with && Operator
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
{unreadMessages.length <= 0 &&
<h2>
No new messages
</h2>
}
</div>
);
}
//const messages = ['React', 'Re: React', 'Re:Re: React'];
const messages = [];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);
We can inline if and else
{isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> )}
Preventing Component from Rendering
function WarningBanner(props) {
if (!props.warn) { return null; }
return ( <div className="warning"> Warning! </div> );
}
if there is warn in props, system will ignore rendering the warning message.
Lists and Keys
https://facebook.github.io/react/docs/lists-and-keys.html
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
<li>{numbers}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
Basic List Component
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
Keys
Keys is given to the elements inside the array to give the elements a stable identity.
const todoItems = todos.map((todo) =>
<li key={todo.id}> {todo.text} </li>
);
For the one we do not have a unique ID, we can directly use the index of that list
const todoItems = todos.map((todo, index) =>
<li key={index}> {todo.text} </li>
);
Extracting Components with Keys
Keys Only Be Unique Among Siblings
References:
https://facebook.github.io/react/docs/handling-events.html
Handling Events
function ActionLink(){ //component
function handleClick(e){
e.preventDefault(); // return false
console.log(’The link was clicked.');
}
return (
<a href=“#” onClick={handleClick}>Click Me</a>
);
}
Binding the event to this
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
Conditional Rendering
https://facebook.github.io/react/docs/conditional-rendering.html
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 />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={true} />,
document.getElementById('root')
);
let will limit the variable scope
http://cookfront.github.io/2015/05/28/es6-let-const/
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = 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 = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> );
}
}
Inline If with && Operator
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
{unreadMessages.length <= 0 &&
<h2>
No new messages
</h2>
}
</div>
);
}
//const messages = ['React', 'Re: React', 'Re:Re: React'];
const messages = [];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);
We can inline if and else
{isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> )}
Preventing Component from Rendering
function WarningBanner(props) {
if (!props.warn) { return null; }
return ( <div className="warning"> Warning! </div> );
}
if there is warn in props, system will ignore rendering the warning message.
Lists and Keys
https://facebook.github.io/react/docs/lists-and-keys.html
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
<li>{numbers}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
Basic List Component
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
Keys
Keys is given to the elements inside the array to give the elements a stable identity.
const todoItems = todos.map((todo) =>
<li key={todo.id}> {todo.text} </li>
);
For the one we do not have a unique ID, we can directly use the index of that list
const todoItems = todos.map((todo, index) =>
<li key={index}> {todo.text} </li>
);
Extracting Components with Keys
Keys Only Be Unique Among Siblings
References:
https://facebook.github.io/react/docs/handling-events.html
发表评论
-
MongoDB 2019(3)Security and Auth
2019-11-16 06:48 241MongoDB 2019(3)Security and Aut ... -
Memory Leak in NodeJS
2018-12-20 06:26 735Memory Leak in NodeJS I have d ... -
Remote Desktop Client
2018-12-07 13:19 1200Remote Desktop Client There is ... -
MetaBase UI Console(2)Docker on MySQL
2018-11-29 06:58 944MetaBase UI Console(2)Docker on ... -
AWS Lambda and Serverless Timeout
2018-09-20 01:20 629AWS Lambda and Serverless Timeo ... -
2018 WebSocket(1)Introduction
2018-03-20 01:22 11092018 WebSocket(1)Introduction ... -
2018 TypeScript Update(3)Introduction Basic Grammar
2018-03-08 03:08 6092018 TypeScript Update(3)Introd ... -
2018 TypeScript Update(2)Introduction Basic Grammar - Classes and Functions
2018-03-06 05:32 5572018 TypeScript Update(2)Introd ... -
2018 TypeScript Update(1)Introduction Basic Grammar - Types and Interface
2018-03-03 01:15 6052018 TypeScript Update(1)Introd ... -
Charts and Console(6)Paging
2018-03-01 00:12 585Charts and Console(6)Paging Th ... -
Vue.JS(3)Google Login
2018-02-14 04:53 1317Vue.JS(3)Google Login I just p ... -
Vue.JS(2)Monitor Water Console - ChartJS and Axios
2018-02-14 03:17 726Vue.JS(2)Monitor Water Console ... -
Vue.JS(1)Introduction and Basic Demo
2018-02-08 06:47 615Vue.JS(1)Introduction and Basic ... -
Charts and Console(5)Validation Form
2017-10-03 05:12 811Charts and Console(5)Validation ... -
Charts and Console(4)Display and Enhancement
2017-09-20 05:39 638Charts and Console(4)Display an ... -
Charts and Console(3)Auth and Login
2017-09-13 03:45 667Charts and Console(3)Auth and L ... -
Charts and Console(2)Login and Proxy
2017-08-31 05:39 878Charts and Console(2)Login and ... -
Charts and Console(1)UI Console and RESTful Client
2017-08-29 11:02 771Charts and Console(1)UI Console ... -
Blog Project(2)Express Backend API - istanbul - mocha - bunyan
2017-06-09 00:05 485Blog Project(2)Express Backend ... -
ReactJS(5)Composition vs Inheritance
2017-06-06 05:55 1117ReactJS(5)Composition vs Inheri ...
相关推荐
【js-conditional-compile-loader 1.0.15】是一个专为JavaScript代码条件编译设计的加载器,用于处理项目中的环境特定代码。在软件开发中,有时我们需要根据不同的运行环境(例如开发、测试和生产)来编译不同的代码...
离线安装包,亲测可用
官方离线安装包,测试可用。使用rpm -ivh [rpm完整包名] 进行安装
在压缩包文件"conditional-get-master"中,可能包含了lws-conditional-get库的源代码、示例项目、文档和配置文件等内容。通过查看源代码,开发者可以深入理解其工作原理,并根据自身需求进行定制化开发。同时,文档...
Hierarchical Text-Conditional Image Generation with CLIP Latents Hierarchical Text-Conditional Image Generation with CLIP Latents是基于CLIP模型的图像生成技术,该技术可以生成高质量的图像,具有语义和...
离线安装包,亲测可用
深度学习-Hierarchical Text-Conditional Image Generation with CLIP Latents Hierarchical Text-Conditional Image Generation是深度学习领域中的一种基于CLIP特征的文本生成图像模型。该模型由CLIP和扩散模型...
npm install --save-dev webpack-conditional-loader 用法 在您的webpack.config.js 将webpack-conditional-loader作为数组中的最后一个加载器,因此它将先处理所有其他代码。 module: { rules : [ { test : / \...
前端项目-conditional-field,Javascript component that shows and hides page elements based on form field values
ember-cli-conditional-compile ember-cli-conditional-compile的目标是为Ember应用程序提供易于使用的功能开关,以使隐藏在禁用的功能开关后面的代码不在编译后的代码中。入门这是一个ember-cli插件,因此您所需要...
总结来说,`laravel-conditional-migrations`是一种优化Laravel迁移流程的方法,它增强了对迁移执行的控制,使开发者能够根据需要和上下文来执行特定的数据库变更。理解和正确使用这一技术能显著提高项目管理和部署...
《前端开源库-lws-conditional-get.zip》是一个与前端开发相关的压缩包,主要涉及的是一个名为“lws”的开源库,以及它对HTTP协议中"Conditional Get"功能的支持。在这个库中,开发者可以找到实现这一功能的相关代码...
资源分类:Python库 所属语言:Python 资源全名:django-conditional-aggregates-0.3.0.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
资源分类:Python库 所属语言:Python 资源全名:coverage-conditional-plugin-0.4.0.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
条件渲染讨论问题 分组聚会并克隆该存储库。 出于本讨论问题的目的,您应该仅在components/MenuBar.js和containers/MainBox.js 。 您的最终目标是使该应用程序像这样运行: 需要考虑的几件事: ...
Li-StoryGAN: A Sequential Conditional GAN for Story Visualization Li-StoryGAN是一种基于序列条件GAN的故事可视化模型,旨在从多句段落生成一系列图像,以描绘故事的整个过程。该模型具有深度上下文编码器、...
讨论问题:有条件的渲染! 分组聚会并克隆该存储库。 出于本讨论问题的目的,您应该仅在components/MenuBar.js和containers/MainBox.js 。 您的最终目标是使该应用程序像这样运行: 需要考虑的几件事: ...
标题“Event-Conditional-Stop.zip_event_labview event”表明这个压缩包文件包含了一个与LabVIEW事件结构相关的程序,具体为“事件结构Event Conditional Stop.vi”。这个虚拟仪器(VI)可能设计用于在特定条件满足...
conditional-compile-loader conditional-compile-loader 根据设定的参数对 vue、js、jsx 和 css(less, sass 等) 代码进行条件编译。 安装 先安装 conditional-compile-loader npm install -D conditional-compile-...
摘要:图卷积神经网络近年来受到越来越多的关注。与标准卷积神经网络不同,图卷积神经网络对图数据进行卷积运算。与一般数据相比,图数据具有不同节点间的相似性信息。因此