Блог

Я отображаю выпадающий список компонентов, который действует как выпадающий компонент html, но представляет собой набор упорядоченных и неупорядоченных списков divs. Я пытаюсь передать стили элементам className, которые имеют выпадающий файл.css, отображающий стили, но я не уверен, как настроить таргетинг на эти конкретные элементы полностью из родительского компонента. Как настроить таргетинг

div className=»select-box-current»

с помощью style={{ border: "1px solid #D4D4D4" }}

и

div className=»select-box-list»

с помощью

 style={{
          opacity: 1,
          display: "inherit",
          animationName: "none",
          cursor: "pointer"
        }}
  

CodeSandblox здесь -> https://codesandbox.io/s/weathered-wood-cf8u8?file=/src/App.js:481-614

Таким образом, с помощью React, если вы передаете реквизит с тем же именем, он выбирает только тот, который был передан последним. Таким образом, с вашими двумя реквизитами стиля он будет передавать только последний. Однако, вероятно, не лучшая идея использовать стиль имени в любом случае, поскольку он не является описательным, а также отражает фактический атрибут стиля HTML.

Дайте двум разным стилям уникальные имена в App.js файл:

 <div className="App">
  <Dropdown
    inputName="viola"
    list={[
      { yard_id: "1", yard_name: "Yard 1" },
      { yard_id: "2", yard_name: "Yard 2" }
    ]}
    // this style is for  className="select-box-current"
    currentStyles={{ border: "1px solid #D4D4D4" }}
    // this style is for className="select-box-list"
    listStyles={{
      opacity: 1,
      display: "inherit",
      animationName: "none",
      cursor: "pointer"
    }}
  />
</div>
  

Теперь нам нужно передать эти два реквизита через ваше дерево компонентов, следующий файл Dropdown.js досье.

Прежде чем я перейду к передаче реквизита, я хочу прокомментировать что-то неправильное, что не совсем связано.

 export const Dropdown = ({ list, ...others }) => {
  const copiedProps = {};
  Object.keys(others).forEach((key) => {
    // these are the props that need to get thru:
    if ("style" === key || "className" === key) {
      copiedProps[key] = others[key];
    }
  });

  ...
  

Копирование реквизита не является необходимым, и способ, которым это делается, на самом деле вреден. Если вы хотите специально настроить таргетинг на значение во входящих реквизитах, вы можете получить к нему прямой доступ (например props.myProp , или в данном случае other.style ) или назначение деструктурирования.

Поскольку вы хотите передать только стиль (теперь listStyles и currentStyles) и имя класса, я решил присвоить их переменной, используя назначение деструктурирования.

 export const Dropdown = ({
  list,
  currentStyles,
  listStyles,
  className,
  ...others
}) => { ... }
  

Теперь, когда у нас есть эти реквизиты, мы хотим передать их в ваш DropdownView , который содержит фактические элементы, на которые вы хотите нацелиться.

 <DropdownView
  dropdownItems={dropdownItems}
  activeItem={activeItem}
  hover={hover}
  setActiveItem={(activeItem) => {
    setActiveItem(activeItem);
  }}
  onMouseOver={(hover) => onMouseOver(hover)}
  toggleList={() => toggleList(!hideList)}
  hideList={hideList}
  className={className}
  currentStyles={currentStyles}
  listStyles={listStyles}
/>
  

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

 <div
  className="select-box-current"
  tabIndex="0"
  autoFocus={true}
  onClick={() => toggleList()}
  style={currentStyles}
>...</div>
  

Я разветвил песочницу, чтобы включить рабочий пример. Но узел, в котором я не установил параметр use the className DropdowView , поскольку было неясно, какой элемент будет иметь это.

https://codesandbox.io/s/hardcore-sun-yyx0g?file=/src/DropdownView.jsx

Я думаю, что вместо того, чтобы использовать их из родительского div, вы можете напрямую использовать эти стили для таких элементов, как this . https://codesandbox.io/s/eloquent-lamport-3spzr?file=/src/App.js

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

 <Dropdown
    inputName="viola"
    list={[
        { yard_id: "1", yard_name: "Yard 1" },
        { yard_id: "2", yard_name: "Yard 2" }
    ]}
    // this style is for  className="select-box-current"
    selectBoxCurrentStyle={{ border: "1px solid #D4D4D4" }}
    // this style is for className="select-box-list"
    selectBoxListStyle={{
        opacity: 1,
        display: "inherit",
        animationName: "none",
        cursor: "pointer"
    }}
/>
  

Вот ссылка https://codesandbox.io/s/damp-rain-cyhxb?file=/src/App.js:133-643