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. C#打印日志的小技巧(转)

    https://www.cnblogs.com/jqg-aliang/p/5234206.html 打印日志的函数 开发中输出日志必不可少,在C#中输出多个不同类型参数的时候,需要连接符累加输出,很是 ...

  2. vue中v-for的用法以及参数的作用

    <template> <div> <div class="content clearfix" v-on:click="goorderingD ...

  3. 一个奇怪的Java集合问题

    int size = list.size(); Integer existIndex = -1; for (int index = 0; index < size; index++) { Pho ...

  4. Arch Linux下配置Samba

    本文记录笔者配置Samba的过程,供用于自用. sudo pacman -S samba sudo vim /etc/samba/smb.conf 添加以下内容 [global]    dns pro ...

  5. 1.3 Quick Start中 Step 2: Start the server官网剖析(博主推荐)

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Step 2: Start the server Step : 启动服务 Kafka ...

  6. 原生js大总结八

    071.如何组织事件冒泡   利用事件对象属性:stopPropagation 和 cancelBubble   stopPropagetion是一个方法:e.stopPropagetion();   ...

  7. 【 Codeforces Round #430 (Div. 2) A 】 Kirill And The Game

    [链接]点击打开链接 [题意] 水题 [题解] 枚举b从x..y看看k*i是不是在l..r之间就好. [错的次数] 0 [反思] 在这了写反思 [代码] #include <cstdio> ...

  8. Jpa 的Persistence.xml配置讲解

    <?xml version="1.0"?> <persistence xmlns="http://java.sun.com/xml/ns/persist ...

  9. dbms_stats

    dbms_stats全部的功能包例如以下: GATHER_INDEX_STATS:分析索引信息 GATHER_TABLE_STATS:分析表信息,当cascade为true时,分析表.列(索引)信息 ...

  10. FTP、WEB虚拟目录作用

    随风原文FTP.WEB虚拟目录作用 在 IIS中,双击您要为之添加虚拟目录的服务以显示其属性表.    单击“目录”选项卡.    单击“添加”.    单击“浏览”从“目录”框中选择一个目录.    ...