React JSX 条件渲染中断下拉列表答案

【问题标题】：React JSX conditional rendering breaks dropdownReact JSX 条件渲染中断下拉列表
【发布时间】：2020-09-14 12:27:16
【问题描述】：

我为我的应用程序设计了一个过滤器组件，它允许用户从下拉列表中选择一种过滤项目列表的方法。下拉选项包括文本、日期和下拉菜单，仅显示选择的过滤方法。

我有一个 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
)}

同样，dropdownsn-p 的代码在 JSX 表达式之外工作得很好，但在添加到上面的 JSX 表达式中时会中断。

编辑：忘记包含 JSX 表达式所需的 Fragment 父元素。包含的父元素问题仍然存在。

【问题讨论】：

你能解释一下“休息”的意思吗？
@BrianThompson 将下拉列表放在 JSX 表达式中时，下拉表单将不可用。喜欢，无法点击。我可以在检查器中看到它，CSS 似乎没有影响它，如果它被拉到 JSX 表达式之外，我可以看到它/进行选择。只有在 JSX 表达式中才会禁用或变为不可用。

标签： reactjs jsx dropdown conditional-formatting

【解决方案1】：

我没有看到下面的 sn-p 的这种行为。

如果缺少任何会导致您的问题的详细信息，请告诉我。但就目前而言，它似乎正在发挥作用。

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>

【讨论】：