jhegedus jhegedus - 2 months ago 6
React JSX Question

function argument in component's constructor in react.js

When I look at the following line in this example:

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


then I don't understand where is the lambda function
({value}) => <li>{value}</li>
used in SortableElement ?

Can someone please enlighten me ?

SortableElement's code:

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

Look at the render() method in the returned React Component by the higher order SortableElement function, the lambda function (which is a stateless component) is passed as the first argument to the higher order function, and this first argument is going to end up as being the parameter WrappedComponent you see in the signature of this higher order function.

So this higher order function is going to spit a React component with a render() method that uses/calls your actual React component that you just passed in (the lambda function).

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