如何从V1升级到V2？需要完整的例子

Question

在查看从v1到v2的代码之前和之后，我没有看到任何示例。

我们在V1中包含的文件Select.jsx中提供了一个用于react-select的包装器

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

在黑暗中尝试将其初步转换（但未设置样式）以进行反应选择V2，如下所示：

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

V1中的示例用法如下：