react.js中组件的构造函数中的函数参数

Question

当我在此示例中查看以下行时：

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

那么我不明白在SortableElement中 使用 lambda函数 ({value}) => <li>{value}</li>在哪里？

有人可以启发我吗？

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

感谢({value}) => <li>{value}</li>在
const SortableItem = SortableElement(({value}) => <li>{value}</li>);
我们实际上将渲染一个li元素，其value将从下面的map方法作为prop传递。

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

在SortableElement的API代码的上下文中，重要的是它呈现WrappedComponent （ 第67-69行 ）。 我们可以将SortableElement视为任何其他高阶组件-包裹另一个组件以提供一些额外功能的组件。 在这种情况下-lambda函数的精美排序动画。

Answer 2

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} />
      );
    }
  }
}

通过高阶SortableElement函数查看返回的React组件中的render()方法，将lambda函数（这是一个无状态组件 ）作为第一个参数传递给高阶函数，并且该第一个参数最终将结束作为参数WrappedComponent您可以在此高阶函数的签名中看到。

因此，这个更高阶的函数将使用render()方法吐出一个React组件，该方法使用/调用您刚传入的实际React组件（lambda函数）。

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

Answer 3

简单地说({value}) => <li>{value}</li>是

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

指React中的纯功能组件

和SortableElement是包装另一个React组件的高阶组件，例如上面的功能组件