[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 ...
随机推荐
- 1、DOM4J简介
1.DOM4J简介 DOM4J是 dom4j.org 出品的一个开源 XML 解析包.DOM4J应用于 Java 平台,采用了 Java 集合框架并完全支持 DOM,SAX 和 JAXP. DOM4J ...
- what happens when changing the DOM via innerHTML
what happens when changing the DOM via innerHTML
- Linux体系结构
linux内核结构: system call interface (SCI层) 为用户空间提供了一套标准的系统调用函数来访问linux内核. process management (PM层) 进程管理 ...
- Java中接口继承泛型接口
在使用Mybatis做web开发时,每一个模块的数据持久层的接口都会定义:增删改查四个方法.我想为什么不新建一个Base接口来做所有数据持久层的父接口呢? 于是,我试验了一下,建立了一个泛型接口,里面 ...
- [D3] Build an Area Chart with D3 v4
Similar to line charts, area charts are great for displaying temporal data. Whether you’re displayin ...
- 软件——机器学习与Python,输入输出的用法
转自:http://www.cnblogs.com/graceting/p/3875438.html 输入很简单 x = input("Please input x:") Plea ...
- python3 购物车小程序,余额写入文件保存
python3 购物车小程序,余额写入文件保存 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan goods = ( ...
- [D3] Build a Column Chart with D3 v4
Column and bar charts are staples of every visualization library. They also make a great project for ...
- P2P系统哪家强,功能其实都一样
现在的P2P平台有好几千家了,了解了其中的几十家,发现用户端的P2P界面功能都差不多.下面来做个简要的总结: 1.通用功能 注册.登录 2.投资理财 针对理财人的投标.债权转让 3.借款申请 ...
- 126邮件POP3,SMTP服务器与端口设置