Как я могу передать реквизит, чтобы изменить ширину реагировать выбрать компонент - PullRequest
Новая
       7

Как я могу передать реквизит, чтобы изменить ширину реагировать выбрать компонент

0 голосов
/ 10 ноября 2019

Вот как я называю компонент, и я передаю реквизиты здесь и хочу использовать его, но не знаю, использовать ли эти реквизиты в коде. 

<Selector
  key={index}
  placeholder={"Select an option."}
  defaultMenuIsOpen={true}
  isSearchable={false}
  options={options}
  width={"600px"} //this is the props i want to use for width
  color={"red"} // this props I want to use for color
  onChange={(e: string | any) => {
    const { value } = e;
    this.handleCondition(value, index, "condition");
  }}
/>

Вот часть стилейдля реакции-выбора, и я хочу использовать реквизит здесь 

export const customStyles: StylesConfig = {
    indicatorSeparator: () => ({ display: 'none' }),
    menu: () => ({
        width: '250px',
        marginTop: '4px',
        border: 'solid 1px #dfe3e9',
        borderRadius: '4px!important',
        boxShadow: '0 0 8px 0 #e5e5ea',
        position: 'absolute',
        zIndex: 999999,
        backgroundColor: 'white',
    }),
    control: (props) => ({
        display: 'flex',
        // width: props.width ? `${props.width}` : '250px',
        width: props.width ? props.width : '250px',
        height: '49px!important',
        borderRadius: '4px!important',
        border: 'solid 1px #dfe3e9',
        color: '#1e58c9',
    }),
    singleValue: () => ({
        color: '#1e58c9',
        flexWrap: 'nowrap'
    })

}

Это часть React, это то, что я рендеринг 

<ReactSelect
  options={this.props.options}
  styles={customStyles}
  {...this.props}
/>
{allowClosing && (
  <CloseWidget place={dpdown} allowClosing={allowClosing} id={id} />
)}

1 Ответ

1 голос
/ 10 ноября 2019

Вы можете, например, сохранить этот объект конфигурации в качестве переменной класса, чтобы иметь доступ к реквизитам и указывать: 

state = {
   width: 250,
}

customStyles: StylesConfig = {
   indicatorSeparator: () => ({ display: 'none' }),
   menu: () => ({
      width: this.state.width + 'px',
   }),
}

Вам также необходимо проверить, изменились ли реквизиты: 

static getDerivedStateFromProps(props, state) {
  if (state.width !== props.width)
     return {
        width: props.width,
     };
  }
};

А потом в вашем компоненте: 

<ReactSelect
   options={this.props.options}
   styles={this.customStyles}
   {...this.props}
/>
...