zoukankan      html  css  js  c++  java
  • [React] Remove React PropTypes by using Flow Annotations (in CRA)

    Starting from v15.5 if we wanted to use React's PropTypes we had to change our code to use a separate node module, now we can go one step further and get rid of that extra dependency just by using flow type annotations in our create-react-app project!

    Install:

    yarn add flow-bin

    Scripts:

    "flow": "flow"

    Run:

    npm run flow init
    npm run flow

    Add flow annotations:

    // @flow
    
    import {createStore} from 'redux';
    import reducer from './reducers/todo';
    
    export type TodoType = {
        id: number,
        name: string,
        isComplete: boolean
    };
    
    export type StateType = {
        todos: Array<TodoType>,
        currentTodo: string
    };
    
    const initState: StateType = {
        todos: [
            {id: 1, name: 'Render static UI', isComplete: true},
            {id: 2, name: 'Create initial state', isComplete: false},
            {id: 3, name: 'Render based on state', isComplete: true}
        ],
        currentTodo: 'Temp'
    };
    
    const store = createStore(reducer, initState);
    
    export default store;

    Import a flow type:

    // @flow
    import React from 'react'
    import {connect} from 'react-redux';
    import type {TodoType} from '../store';
    
    
    const TodoItem = ({id, name, isComplete}: TodoType) => (
        <li>
            <input type="checkbox" defaultChecked={isComplete} />
            {name}
        </li>
    )
    
    const TodoList =  (props: {todos: Array<TodoType>}) => (
        <div className="Todo-List">
            <ul>
                {props.todos.map(todo => <TodoItem key={todo.id} {...todo} />)}
            </ul>
        </div>
    );
    
    export default connect(
        (state) => ({todos: state.todos})
    )(TodoList);
  • 相关阅读:
    快速编辑里指定默认值
    Odoo domain 中的 like, ilike, =like, =ilike 举例说明【转】
    odoo报表条码无法显示解决[转]
    ubuntu 安装 wkhtmltopdf 的方法
    解决Odoo日期(时间)无效的问题 [转]
    ShareSDK演示
    黑客帝国数字矩阵特效做法
    lua中实现倒计时
    Lua中用Split函数分割字符串
    lua封装的位运算
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7467082.html
Copyright © 2011-2022 走看看