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的更多相关文章

  1. [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 ...

  2. [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 ...

  3. [Vue] Load components when needed with Vue async components

    In large applications, dividing the application into smaller chunks is often times necessary. In thi ...

  4. [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 ...

  5. React 中的函数式思想

    函数式编程简要概念 函数式编程中一个核心概念之一就是纯函数,如果一个函数满足一下几个条件,就可以认为这个函数是纯函数了: 它是一个函数(废话): 当给定相同的输入(函数的参数)的时候,总是有相同的输出 ...

  6. TED演讲:别不信,你只需20个小时,就能学会任何事情!

    https://www.bilibili.com/video/av50668972/?spm_id_from=333.788.videocard.3 two years ago, my life ch ...

  7. type Props={};

    Components Learn how to type React class components and stateless functional components with Flow Se ...

  8. [React] Make Compound React Components Flexible

    Our current compound component implementation is great, but it's limited in that users cannot render ...

  9. [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. 1、DOM4J简介

    1.DOM4J简介 DOM4J是 dom4j.org 出品的一个开源 XML 解析包.DOM4J应用于 Java 平台,采用了 Java 集合框架并完全支持 DOM,SAX 和 JAXP. DOM4J ...

  2. what happens when changing the DOM via innerHTML

    what happens when changing the DOM via innerHTML

  3. Linux体系结构

    linux内核结构: system call interface (SCI层) 为用户空间提供了一套标准的系统调用函数来访问linux内核. process management (PM层) 进程管理 ...

  4. Java中接口继承泛型接口

    在使用Mybatis做web开发时,每一个模块的数据持久层的接口都会定义:增删改查四个方法.我想为什么不新建一个Base接口来做所有数据持久层的父接口呢? 于是,我试验了一下,建立了一个泛型接口,里面 ...

  5. [D3] Build an Area Chart with D3 v4

    Similar to line charts, area charts are great for displaying temporal data. Whether you’re displayin ...

  6. 软件——机器学习与Python,输入输出的用法

    转自:http://www.cnblogs.com/graceting/p/3875438.html 输入很简单 x = input("Please input x:") Plea ...

  7. python3 购物车小程序,余额写入文件保存

    python3 购物车小程序,余额写入文件保存 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan goods = ( ...

  8. [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 ...

  9. P2P系统哪家强,功能其实都一样

    现在的P2P平台有好几千家了,了解了其中的几十家,发现用户端的P2P界面功能都差不多.下面来做个简要的总结: 1.通用功能  注册.登录  2.投资理财  针对理财人的投标.债权转让  3.借款申请  ...

  10. 126邮件POP3,SMTP服务器与端口设置