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

Question

当我查看此example中的以下行时：

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方法传递。

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

通过更高阶render()函数查看返回的React组件中的SortableElement方法，将lambda函数（它是stateless component）作为第一个参数传递给更高级别的WrappedComponent order函数，第一个参数最终将作为您在此高阶函数的签名中看到的参数render()。

因此，这个高阶函数将使用<WrappedComponent ref={ref} {...this.props} /> 方法吐出一个React组件，该方法使用/调用刚刚传入的实际React组件（lambda函数）。

        MailMessage mailMessage = new MailMessage("abc@xyz.in", "receiver@xyz.in");
        mailMessage.Priority = System.Net.Mail.MailPriority.High;
        mailMessage.Body = "message";
        mailMessage.IsBodyHtml = true;
        SmtpClient smtpClient = new SmtpClient("host/IP", 25);
        NetworkCredential credentials = new NetworkCredential("abc@xyz.in", "password");
        smtpClient.Credentials = credentials;
        smtpClient.DeliveryMethod = SmtpDeliveryMethod.Network;
        smtpClient.Credentials = credentials;
        smtpClient.Send(mailMessage);

Answer 3

简单地说 <{1}}是

的简写

({value}) => <li>{value}</li>

参考pure functional component in React

和React.crateClass({ render:function(){ return <li>{this.props.value}</li> } }) 是一个higher order component包装另一个React组件，如上面的功能组件