Раскрывающийся список условных разрывов отрисовки React JSX - PullRequest
Новая
       85

Раскрывающийся список условных разрывов отрисовки React JSX

0 голосов
/ 27 мая 2020

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

У меня есть выражение JSX, которое позволяет мне переключаться между различными компонентами на основе метода фильтрации. Параметры text и date работают нормально, но методы фильтра dropdown не работают, когда они находятся внутри выражения JSX (и только внутри него). Вот код для опции выпадающего фильтра, называемой Priority: 

<select value={priority} onChange={onChange} name="priority">
    <option value="" disabled>
        Filter...
    </option>
    <option value="low">by Low Priority</option>
    <option value="norm">by Normal Priority</option>
    <option value="high">by High Priority</option>
</select>
<label htmlFor="priority">Filtering by Priority Level</label>

Условное форматирование следует этому формату: 

{ filterType === 'name' ? (
    // Name filter input code
) : filterType === 'date' ? (
    // Date filter input code
) : filterType === 'priority' ? (
    <Fragment>
        <select value={priority} onChange={onChange} name="priority">
            <option value="" disabled>
                Filter...
            </option>
            <option value="low">by Low Priority</option>
            <option value="norm">by Normal Priority</option>
            <option value="high">by High Priority</option>
        </select>
        <label htmlFor="priority">Filtering by Priority Level</label>
    </Fragment>
) : filterType === 'location' && (
    // Location filter input code
)}

Опять же, фрагмент кода dropdown отлично работает за пределами выражение JSX, но ломается при добавлении в выражение JSX выше.

EDIT: забыл включить Fragment родительские элементы, необходимые для выражений JSX. Проблема все еще сохраняется с включенными родительскими элементами.

1 Ответ

1 голос
/ 27 мая 2020

Я не вижу такого поведения в приведенном ниже фрагменте.

Если отсутствуют какие-либо детали, которые могут привести к возникновению вашей проблемы, сообщите мне. Но как есть, похоже, работает. 

const {useState} = React;

const types = ['name', 'date', 'priority', ''];

const Example = () => {
  const [value, setValue] = useState('');
  const [filterType, setType] = useState('');
  
  const onChange = (e) => setValue(e.target.value)
  
  const toggleType = () => {
    const lastIndex = types.indexOf(filterType) == types.length - 1 ? -1 : types.indexOf(filterType);
    setType(types[lastIndex + 1])
  }
   
   return (
    <div>
      <div>
        <button onClick={toggleType}>Toggle</button>
      </div>
      { filterType === 'name' ? (
          <div>Name</div>
      ) : filterType === 'date' ? (
          <div>Date</div>
      ) : filterType === 'priority' ? (
        <React.Fragment>
          <select value={value} onChange={onChange} name="priority">
            <option value="" disabled>
              Filter...
            </option>
            <option value="low">by Low Priority</option>
            <option value="norm">by Normal Priority</option>
            <option value="high">by High Priority</option>
          </select>
          <label htmlFor="priority">Filtering by Priority Level</label>
        </React.Fragment>
      ) : 
        <div>Else</div>
      }
    </div>
   );
}

ReactDOM.render(<Example />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
...