Как я могу использовать response-select, чтобы настраивать подтекст рендеринга под каждым выпадающим элементом? - PullRequest
Новая
       27

Как я могу использовать response-select, чтобы настраивать подтекст рендеринга под каждым выпадающим элементом?

0 голосов
/ 19 февраля 2019

Я пытаюсь выяснить, как я могу использовать пользовательские компоненты вact-select, чтобы отобразить выпадающий список, содержащий элементы с подтекстом.

Я рассмотрел каждый из компонентов: https://react -select.com / components и не уверен, какой из них лучше всего соответствует моим потребностям.

Из списка компонентов я считаю, что компонент option предназначен для чего-тотак и, вероятно, будет работать, но я не уверен.Может ли кто-нибудь подтвердить мою мысль?

1 Ответ

0 голосов
/ 19 февраля 2019

Решение React-select V2:

Вы абсолютно правы, использование компонента Option позволит вам отформатировать каждый параметр в menuList, как показано в следующем примере: 

const options = [
  {
    label: "text 1",
    subLabel: "subtext 1",
    value: "1"
  },
  {
    label: "text 2",
    subLabel: "subtext 2",
    value: "2"
  },
  {
    label: "text 3",
    subLabel: "subtext 3",
    value: "3"
  },
  {
    label: "text 4",
    subLabel: "subtext 4",
    value: "4"
  }
];

const Option = props => {
  return (
    <components.Option {...props}>
      <div>{props.data.label}</div>
      <div style={{ fontSize: 12 }}>{props.data.subLabel}</div>
    </components.Option>
  );
};

function App() {
  return (
    <div className="App">
      <Select options={options} components={{ Option }} />
    </div>
  );
}

Здесь живой пример .

React-select решение V1:

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

class App extends Component {
  renderOption = option => (
    <div>
      <label>{option.label}</label>
      <label style={{ display: "block", color: "gray", fontSize: 12 }}>
        {option.subLabel}
      </label>
    </div>
  );
  render() {
    return (
      <div className="App">
        <Select options={options} optionRenderer={this.renderOption} />
      </div>
    );
  }
}

Здесь живой пример .

...