[React] Break up components into smaller pieces using Functional Components
We are going to ensure our app is structured in a clear way using functional components. Then, we are going to pass those components state values from the parent class component.
const { Component } = React; const InputField = (props) => {
return (
<input type="text" />
)
} const Button = (props) => {
return (
<button>Go</button>
)
} const List = (props) => {
console.log(props)
return (
<ul>
{props.todos.map(todo => {
return <li key={todo.id}>{todo.name}</li>
})}
</ul>
)
} class App extends Component {
constructor() {
super()
this.state = {
todos: [
{id: 0, name: 'foo'},
{id: 1, name: 'bar'},
{id: 2, name: 'baz'}
]
}
} render() {
return (
<div className="App">
<InputField />
<Button />
<List todos={this.state.todos} />
</div>
)
}
} ReactDOM.render(
<App />,
document.getElementById('root')
);
[React] Break up components into smaller pieces using Functional Components的更多相关文章
- [Vue @Component] Write Vue Functional Components Inline
Vue's functional components are small and flexible enough to be declared inside of .vue file next to ...
- [React] Return a list of elements from a functional component in React
We sometimes just want to return a couple of elements next to one another from a React functional co ...
- [Vue] Load components when needed with Vue async components
In large applications, dividing the application into smaller chunks is often times necessary. In thi ...
- [React] Refactor a Stateful List Component to a Functional Component with React PowerPlug
In this lesson we'll look at React PowerPlug's <List /> component by refactoring a normal clas ...
- React 中的函数式思想
函数式编程简要概念 函数式编程中一个核心概念之一就是纯函数,如果一个函数满足一下几个条件,就可以认为这个函数是纯函数了: 它是一个函数(废话): 当给定相同的输入(函数的参数)的时候,总是有相同的输出 ...
- TED演讲:别不信,你只需20个小时,就能学会任何事情!
https://www.bilibili.com/video/av50668972/?spm_id_from=333.788.videocard.3 two years ago, my life ch ...
- type Props={};
Components Learn how to type React class components and stateless functional components with Flow Se ...
- [React] Make Compound React Components Flexible
Our current compound component implementation is great, but it's limited in that users cannot render ...
- [React] Intro to inline styles in React components
React lets you use "inline styles" to style your components; inline styles in React are ju ...
随机推荐
- C#打印日志的小技巧(转)
https://www.cnblogs.com/jqg-aliang/p/5234206.html 打印日志的函数 开发中输出日志必不可少,在C#中输出多个不同类型参数的时候,需要连接符累加输出,很是 ...
- vue中v-for的用法以及参数的作用
<template> <div> <div class="content clearfix" v-on:click="goorderingD ...
- 一个奇怪的Java集合问题
int size = list.size(); Integer existIndex = -1; for (int index = 0; index < size; index++) { Pho ...
- Arch Linux下配置Samba
本文记录笔者配置Samba的过程,供用于自用. sudo pacman -S samba sudo vim /etc/samba/smb.conf 添加以下内容 [global] dns pro ...
- 1.3 Quick Start中 Step 2: Start the server官网剖析(博主推荐)
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Step 2: Start the server Step : 启动服务 Kafka ...
- 原生js大总结八
071.如何组织事件冒泡 利用事件对象属性:stopPropagation 和 cancelBubble stopPropagetion是一个方法:e.stopPropagetion(); ...
- 【 Codeforces Round #430 (Div. 2) A 】 Kirill And The Game
[链接]点击打开链接 [题意] 水题 [题解] 枚举b从x..y看看k*i是不是在l..r之间就好. [错的次数] 0 [反思] 在这了写反思 [代码] #include <cstdio> ...
- Jpa 的Persistence.xml配置讲解
<?xml version="1.0"?> <persistence xmlns="http://java.sun.com/xml/ns/persist ...
- dbms_stats
dbms_stats全部的功能包例如以下: GATHER_INDEX_STATS:分析索引信息 GATHER_TABLE_STATS:分析表信息,当cascade为true时,分析表.列(索引)信息 ...
- FTP、WEB虚拟目录作用
随风原文FTP.WEB虚拟目录作用 在 IIS中,双击您要为之添加虚拟目录的服务以显示其属性表. 单击“目录”选项卡. 单击“添加”. 单击“浏览”从“目录”框中选择一个目录. ...