重构下拉列表答案

【问题标题】：Refactoring dropdown list重构下拉列表
【发布时间】：2021-05-11 08:08:03
【问题描述】：

我有一个下拉列表组件

const NudgeTrigger = ({ isShowItem, checkItem, index, title }) => {
  const [toggleArrow, setToggleArrow] = useState(false)
  return (
    <div className={`nudgeTrigger ${toggleArrow ? 'nudgeTriggerUpArrow' : ''}`} onClick={() => {
      // Does the index exist in the showListItem array? Yes: delete it and close dropdown. No: add it and open dropdown.
      isShowItem(index) ? checkItem(index, false) : checkItem(index, true)
      setToggleArrow(!toggleArrow)
    }}>
      <p key={index} className={styles.nudgeTitle}>{title}</p>
    </div>
  )
}

在以下上下文中使用

<NudgeTrigger isShowItem={isShowItem} checkItem={checkItem} index={index} title={nudge.title}/>

其中NudgeTrigger 映射到值数组并接收index

我希望数组的第三项有一个单独的状态来切换其箭头图像，并向NudgeTrigger 添加了一个third 属性

const NudgeTrigger = ({ isShowItem, checkItem, index, title, third }) => {
  const [toggleArrow, setToggleArrow] = useState(false)
  const [toggleThirdArrow, setToggleThirdArrow] = useState(third)
  {toggleThirdArrow ? (
      <>
        <div className={`nudgeTrigger ${toggleArrow ? 'nudgeTriggerUpArrow' : ''}`} onClick={() => {
          // Does the index exist in the showListItem array? Yes: delete it and close dropdown. No: add it and open dropdown.
          isShowItem(index) ? checkItem(index, false) : checkItem(index, true)
          setToggleArrow(!toggleArrow)
        }}>
          <p key={index} className={styles.nudgeTitle}>{title}</p>
        </div>
      </>  
    ) : (
      <>
        <div className={`nudgeTrigger ${toggleThirdArrow ? 'nudgeTriggerUpArrow' : ''}`} onClick={() => {
          // Does the index exist in the showListItem array? Yes: delete it and close dropdown. No: add it and open dropdown.
          isShowItem(index) ? checkItem(index, false) : checkItem(index, true)
          setToggleThirdArrow(!toggleThirdArrow)
        }}>
          <p key={index} className={styles.nudgeTitle}>{title}</p>
        </div>
      </>
    )
  }
}

在以下上下文中使用

<NudgeTrigger isShowItem={isShowItem} checkItem={checkItem} index={index} title={nudge.title} third={index === 2}/>

但是我收到 2 个错误。将鼠标悬停在 VSCode 上的 NudgeTrigger 上会显示错误状态

'NudgeTrigger' cannot be used as a JSX component.
  Its return type 'void' is not a valid JSX element

而实际渲染页面会导致第二个错误

Error: NudgeTrigger(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

我做错了什么？

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

您在NudgeTrigger 中缺少return

试试下面的组件代码：-

  const NudgeTrigger = ({ isShowItem, checkItem, index, title, third }) => {
    const [toggleArrow, setToggleArrow] = useState(false);
    const [toggleThirdArrow, setToggleThirdArrow] = useState(third);
    return (
      <>
        {toggleThirdArrow ? (
          <>
            <div
              className={`nudgeTrigger ${
                toggleArrow ? 'nudgeTriggerUpArrow' : ''
              }`}
              onClick={() => {
                // Does the index exist in the showListItem array? Yes: delete it and close dropdown. No: add it and open dropdown.
                isShowItem(index)
                  ? checkItem(index, false)
                  : checkItem(index, true);
                setToggleArrow(!toggleArrow);
              }}
            >
              <p key={index} className={styles.nudgeTitle}>
                {title}
              </p>
            </div>
          </>
        ) : (
          <>
            <div
              className={`nudgeTrigger ${
                toggleThirdArrow ? 'nudgeTriggerUpArrow' : ''
              }`}
              onClick={() => {
                // Does the index exist in the showListItem array? Yes: delete it and close dropdown. No: add it and open dropdown.
                isShowItem(index)
                  ? checkItem(index, false)
                  : checkItem(index, true);
                setToggleThirdArrow(!toggleThirdArrow);
              }}
            >
              <p key={index} className={styles.nudgeTitle}>
                {title}
              </p>
            </div>
          </>
        )}
      </>
    );
  }

【讨论】：