zoukankan      html  css  js  c++  java
  • [React] Cleanly Map Over A Stateless Functional Component with a Higher Order Component

    In this lesson we'll create a Higher Order Component (HOC) that takes care of the key property that React looks for when using map to create elements from a list. This HOC will allow us to wrap any component and it will take care of placing the keyprop on the component for us based on the property name that we specify.

    Consider following code:

    import React from 'react';
    import { render } from 'react-dom';
    
    const todos = [
      { id: 1, name: 'Create the initial state', isComplete: true },
      { id: 2, name: 'Map over data', isComplete: true },
      { id: 3, name: 'Refactor', isComplete: true },
      { id: 4, name: 'Use HOC to remove warning', isComplete: false },
    ];
    
    const TodoItem = (todo) => (
      <li
        style={{
          textDecoration: todo.isComplete ? 'line-through' : '',
        }}
      >
        {todo.name} 
      </li>
    );
    
    const App = (props) => (
      <div>
        <ul>
          {props.todos.map(todo => <TodoItem key={todo.id} {...todo} />)}
        </ul>
      </div>
    );
    
    render(<App todos={todos}/>, document.getElementById('root'));

    When we trying to render <TodoItem>, we use map function, just because we have to add 'key' attr to each TodoItem. We can improve this by using HoC. A HoC is just a function which takes component as arguement and return a function which render the component:

    const withKeyFromProps = (Comp, propName) => (props) => (
      <Comp key={props[propName]} {...props} /> 
    ); 

    ----

  • 相关阅读:
    标定相关-一些资源
    论文基础-5几何知识
    论文基础-3微积分
    h5页面 判断网页是否由微信或qq内置浏览器打开
    Html5 页面后退并刷新
    h5 页面下拉刷新
    绑定点击事件 传参
    公众号做分享功能
    清微信缓存
    手机端适配
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6908577.html
Copyright © 2011-2022 走看看