How to upgrade from V1 to V2? Need full examples

问题:

I don't see any samples showing before and after view of the code for going from v1 to v2.

We have a wrapper for react-select in our file Select.jsx that in V1 contains

import React from 'react';
import ReactSelect from 'react-select';
import css from 'react-css-modules';
import globalStyles from '../../../node_modules/react-select/dist/react-select.css';
import styles from './Select.css';

/**
 * Select component
 * How do we style this?
 */
const Select = (props) => {
  const onChange = values => {
    props.multi ? props.onChange(_.map(values, obj => obj.value)) : props.onChange(values.value)
  };

  return <ReactSelect
    multi={props.multi}
    value={props.value}
    options={props.options}
    disabled={props.disabled}
    placeholder={props.placeholder}
    clearable={props.clearable}
    className={`${props.type} ${props.kind}`}
    tabSelectsValue={props.tabSelectsValue}
    searchable={props.searchable}
    optionComponent={props.optionComponent}
    valueComponent={props.valueComponent}
    onChange={onChange} />;
}

export default css(Select, styles);

A preliminary stab in the dark attempt to convert it (but not styling) to react-select V2 looks like:

import React from 'react';
import ReactSelect, { components } from 'react-select';
import css from 'react-css-modules';
import styles from './Select.css';

/**
 * Select component
 * How do we style this?
 */
const Select = (props) => {
  const onChange = values => {
    props.multi ? props.onChange(_.map(values, obj => obj.value)) : props.onChange(values.value)
  };

  const Options = (props) => {
    return (
        <components.Option {...props.optionComponent}/>
        /*<components.ValueContainer {...props.valueComponent}/>*/
    );
  };

  const MultiValueContainer = (props) => {
    return (
      <components.MultiValueContainer {...props.valueComponent}/>
    );
  };

  return <ReactSelect
    isMulti={props.multi}
    value={props.value}
    options={props.options}
    isDisabled={props.disabled}
    placeholder={props.placeholder}
    isClearable={props.clearable}
    className={`${props.type} ${props.kind}`}
    tabSelectsValue={props.tabSelectsValue}
    isSearchable={props.searchable}
    components={{ Options, MultiValueContainer }}
    onChange={onChange} />;
}

export default css(Select, styles);

A sample use in V1 looks like: