аргумент функции в конструкторе компонента в react.js

Question

Когда я смотрю на следующую строку в этом example:

const SortableItem = SortableElement(({value}) => <li>{value}</li>);

тогда я не понимаю где функция лямбда({value}) => <li>{value}</li>используется в SortableElement?

Может кто-нибудь, пожалуйста, просветит меня?

код SortableElement в:

import React, {Component, PropTypes} from 'react'; 
import {findDOMNode} from 'react-dom'; 
import invariant from 'invariant'; 

// Export Higher Order Sortable Element Component 
export default function SortableElement (WrappedComponent, config = {withRef: false}) { 
    return class extends Component { 
     static displayName = (WrappedComponent.displayName) ? `SortableElement(${WrappedComponent.displayName})` : 'SortableElement'; 
     static WrappedComponent = WrappedComponent; 
     static contextTypes = { 
      manager: PropTypes.object.isRequired 
     }; 
     static propTypes = { 
      index: PropTypes.number.isRequired, 
      collection: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 
      disabled: PropTypes.bool 
     }; 
     static defaultProps = { 
      collection: 0 
     }; 
     componentDidMount() { 

      let {collection, disabled, index} = this.props; 

      if (!disabled) { 
       this.setDraggable(collection, index); 
      } 
     } 
     componentWillReceiveProps(nextProps) { 
      const {index} = this.props; 
      if (index !== nextProps.index && this.node) { 
       this.node.sortableInfo.index = nextProps.index; 
      } 
      if (this.props.disabled !== nextProps.disabled) 
      { 
       let {collection, disabled, index} = nextProps; 
       if (disabled) { 
        this.removeDraggable(collection); 
       } 
       else { 
        this.setDraggable(collection, index); 
       } 
      } 
     } 
     componentWillUnmount() { 
      let {collection, disabled} = this.props; 

      if (!disabled) this.removeDraggable(collection); 
     } 
     setDraggable(collection, index){ 
      let node = this.node = findDOMNode(this); 

      node.sortableInfo = {index, collection}; 

      this.ref = {node}; 
      this.context.manager.add(collection, this.ref); 
     } 
     removeDraggable(collection) { 
      this.context.manager.remove(collection, this.ref); 
     } 
     getWrappedInstance() { 
      invariant(config.withRef, 'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableElement() call'); 
      return this.refs.wrappedInstance; 
     } 
     render() { 
      const ref = (config.withRef) ? 'wrappedInstance' : null; 
      return (
       <WrappedComponent ref={ref} {...this.props} /> 
      ); 
     } 
    } 
} 

Answer 1

export default function SortableElement (WrappedComponent, config = {withRef: false}) { 
    return class extends Component { 

    ... 

    render() { 
     const ref = (config.withRef) ? 'wrappedInstance' : null; 
     return (
     <WrappedComponent ref={ref} {...this.props} /> 
    ); 
    } 
    } 
} 

Посмотрите на методе render() в возвращаемом React компонента, высший порядок SortableElement функция, функция лямбды (которая является stateless component) передается в качестве первого аргумента функции более высокого порядка, и этот первый аргумент получится в качестве параметра WrappedComponent, который вы видите в сигнатуре этой функции более высокого порядка.

Таким образом, эта функция более высокого порядка будет наплевать компонент React с помощью метода render(), который использует/вызывает ваш действительный компонент React, который вы только что передали (функция лямбда).

<WrappedComponent ref={ref} {...this.props} /> 

Answer 2

Благодаря ({value}) => <li>{value}</li> в
const SortableItem = SortableElement(({value}) => <li>{value}</li>);
мы будем на самом деле рендеринга li элемент с value передается в качестве опоры от map метода ниже.

const SortableList = SortableContainer(({items}) => { 
    return (
     <ul> 
      {items.map((value, index) => 
       <SortableItem key={`item-${index}`} index={index} value={value} /> 
      )} 
     </ul> 
    ); 
}); 

В контексте кода API в SortableElement это главное в том, что она оказывает WrappedComponent (lines 67-69). Мы можем рассматривать SortableElement как любой другой компонент более высокого порядка - компонент, который обертывает другой компонент для предоставления дополнительных функций. В этом случае - фантастическая сортировочная анимация лямбда-функции.

Answer 3

Попросту ({value}) => <li>{value}</li> короткая рука для

React.crateClass({ 
    render:function(){ 
     return <li>{this.props.value}</li> 
    } 
}) 

см pure functional component in React

и SortableElement является higher order component оберточным другой Реагировать компонент, такой функциональный компонент выше