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

Question

当我看到example 中的以下行时：

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

那我不明白 lambda 函数在哪里 ({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} />
      );
    }
  }
}

看高阶 SortableElement 函数返回的 React Component 中的 render() 方法，lambda 函数（这是一个 stateless component）作为第一个参数传递给高阶函数，而这个第一个参数最终将成为参数WrappedComponent，您在这个高阶函数的签名中看到。

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

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

Answer 2

感谢({value}) => <li>{value}</li> in
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>
    );
});

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

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 包装了另一个 React 组件，例如上面的功能组件