Question

import React, { Component } from "react";
import { Creatable, components } from "react-select";
import Animated from "react-select/lib/animated";

const Option = (props) => {
  return (
    <components.Option {...props}>
    <Avatar size="50" text={props.label} url={props.image}/>
      <div>{props.value}</div>
      <div>{props.label}</div>
    </components.Option>
  );
};
class ReactSelect extends Component {
render(){
return(
    <Creatable
            isValidNewOption={this.handleValidation}
            value={val}
            components={{ Option: Option }}
            onChange={this.handleChange}
            options={options}
            isMulti={true}
            styles={customStyles}
            closeMenuOnSelect={true}
            placeholder={"Add Email Ids"}
            getOptionLabel={option => option.label}
          />
)}
}

我无法在Options之外的组件属性中添加“ Animated（）”。添加多个组件同时一个组件是动画库的语法是什么。

我想要类似components = {{Option} && Animated()}之类的东西，以便可以修改“选项”组件以及通过单击IndicatorRemove来获取动画。

Answer 1

components = {{Option} && Animated()}对我不起作用。它仅应用外部花括号中的第一项。它如何为您工作？

这是我的沙盒代码： https://codesandbox.io/s/pk0xjnm73x

在react-select中如何在组件属性中与其他组件一起调用Animated（）函数？

1 个答案: