reactjs 一种多用例复杂逻辑条件渲染功能组件

8ulbf1ek 于 2023-01-02 发布在 React

关注(0)|答案(2)|浏览(107)

我是React的Functional Component和新Hook特性的新手。目前我有一个复杂逻辑和多个case的条件渲染用例（不能简单地使用switch case，triary或enum渲染）。请看下面的示例代码：

const conditionRender = condition => {
  if (condition < 0) {
    return <Component1 />
  }
  if (condition < 12) {
    return <Component2 />
  }
  if (condition < 50) {
    return <Component3 />
  }
  if (condition < 100) {
    return <Component4 />
  }
  if (condition % 2 === 0) {
    return <Component5 />
  }
}

function App() {
  return (
    <div className="App">
    {conditionRender(condition)}
    </div>
  );
}

我使用了函数组件之外的函数。这是最好的做法吗？或者你可以建议最好的做法。谢谢

reactjs

来源：https://stackoverflow.com/questions/57480620/condition-render-functional-component-with-multiple-case-and-complex-logic

2条答案

按热度按时间

dsekswqp1#

只在最后一个中返回空值，因为如果没有条件匹配，则不会返回任何内容

const conditionRender = condition => {
  if (condition < 0) {
    return <Component1 />
  }
  if (condition < 12) {
    return <Component2 />
  }
  if (condition < 50) {
    return <Component3 />
  }
  if (condition < 100) {
    return <Component4 />
  }
  if (condition % 2 === 0) {
    return <Component5 />
  }
return null
}

赞(0）回复(0）举报 2023-01-02

yxyvkwin2#

我认为最简单的方法来做到这一点与胡克斯是遵循这条道路。

- 应用程序js**

<ConditionalComponent comp={"ex1"} />
<ConditionalComponent comp={"ex2"} />

- 条件组件. js**

export default function ConditionalComponent(props) {
        return (
            <>
                {props.comp === "ex1" && <h1>Example 1<h1/>}
                {props.comp === "ex2" && <h1>Example 2<h1/>}
            </>
        )
}

别忘了进口!

赞(0）回复(0）举报 2023-01-02

我来回答

reactjs 一种多用例复杂逻辑条件渲染功能组件

2条答案

相关问题

热门标签

最新问答