如何在React组件中使用switch语句?

我有一个React组件，在组件的渲染方法中，我有这样的东西:

render() {
    return (
        <div>
            <div>
                // removed for brevity
            </div>

           { switch(...) {} }

            <div>
                // removed for brevity
            </div>
        </div>
    );
}

Now the point is that I have two div elements, one at the top and one at the bottom, that are fixed. In the middle I want to have a switch statement, and according to a value in my state I want to render a different component. So basically, I want the two div elements to be fixed always, and just in the middle to render a different component each time. I'm using this to implement a multi-step payment procedure). Though, as is the code currently it doesn't work, as it gives me an error saying that switch is unexpected. Any ideas how to achieve what I want?

当前回答

改进了一点马特·韦的回答。

export const Switch = ({ test, children }) => { const defaultResult = children.find((child) => child.props.default) || null; const result = children.find((child) => child.props.value === test); return result || defaultResult; }; export const Case = ({ children }) => children; const color = getColorFromTheMostComplexFnEver(); <Switch test={color}> <Case value="Green">Forest</Case> <Case value="Red">Blood</Case> <Case default>Predator</Case> </Switch> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

2022-10-05 10:11:14

其他回答

我正在使用这个帮助器，它允许我在JSX中有开关语句

// in helpers folder const switchTrue = (object) => { const { default: defaultValue, ...rest } = object; const obj = { default: defaultValue, ...rest }; const result = Object.keys(obj).reduce((acc, cur) => { return { ...acc, [cur === 'default' ? 'true' : cur]: obj[cur], }; }, {}); return result['true']; }; const Sample = () => { const isDataLoading = false; return ( <div> { switchTrue({ [`${isDataLoading}`]: <div>Loading</div>, [`${!isDataLoading}`]: <div>Data Ready</div>, default: <div>Default</div>, }) } </div> ) } ReactDOM.render( <Sample/>, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="react"></div>

2021-12-23 09:49:52

我在render()方法中做了这个:

  render() {
    const project = () => {
      switch(this.projectName) {

        case "one":   return <ComponentA />;
        case "two":   return <ComponentB />;
        case "three": return <ComponentC />;
        case "four":  return <ComponentD />;

        default:      return <h1>No project match</h1>
      }
    }

    return (
      <div>{ project() }</div>
    )
  }

我试图保持render()返回干净，所以我把我的逻辑放在一个'const'函数上面。这样我也可以缩进我的开关盒整齐。

2018-10-03 02:21:51

如何:

mySwitchFunction = (param) => {
   switch (param) {
      case 'A':
         return ([
            <div />,
         ]);
      // etc...
   }
}
render() {
    return (
       <div>
          <div>
               // removed for brevity
          </div>

          { this.mySwitchFunction(param) }

          <div>
              // removed for brevity
          </div>
      </div>
   );
}

2017-10-05 19:02:32

这是因为switch语句是一个语句，但这里javascript需要一个表达式。

虽然，不建议在呈现方法中使用switch语句，但你可以使用自调用函数来实现这一点:

render() {
    // Don't forget to return a value in a switch statement
    return (
        <div>
            {(() => {
                switch(...) {}
            })()}
        </div>
    );
}

2017-10-05 19:02:10

我们可以直接使用useCallback来做到这一点

const renderContent = useCallback(() => { switch (sortState) { “一”: 返回“一”; “两个”: 返回“两个”; “三”: 返回“三”; “四”: 返回“四”; 默认值: 返回“一”; ｝ }, [sortState]);

这将在jsx中使用

<div>排序：{renderContent（）}</div>

2022-10-25 19:49:10

如何在React组件中使用switch语句?

推荐文章

最新文章

标签