React JSX 中的映射和切换

Question

我有点难，我有一个 React 函数组件，我需要 map 然后 switch 在我的 JSX 中。

我知道我应该尝试执行此 outside/before return 语句，但我似乎无法弄清楚，因为呈现的组件依赖于通过组件道具传递的数组。

以下是我在 return 声明中试图实现的目标

{(() => {
  files.map((file, index) =>
    let type = getFileType(file)
    switch(type){
      case 'image':
        return (
          <div className="item">
            <img src={file}/>
          </div>
        )
      default:
       return;
    }
  })()
}

我显然忽略了一些重要的事情，我已经研究了一段时间但似乎无法理解。任何帮助将不胜感激。

Answer 1

您需要 return 来自 Immediate-Invoked 函数。像下面这样尝试。

{(() => {
  return files.map((file, index) => {
    let type = getFileType(file);
    switch (type) {
      case "image":
        return (
          <div className="item">
            <img src={file} />
          </div>
        );
      default:
        return null;
    }
  });
})()}

Answer 2

像这样的东西应该可以工作：

import React from "react";



const files = ["file01.img", "file02.other", "file03.img"];


const getFileType = (file) => {
    if (file.endsWith(".img")) return "image";
    return "other";
};



export default function YourComponent() {

    return (

        <div>

            { files.map( (file, index) => {
                
                let type = getFileType(file)
                
                switch (type) {
                    case 'image':
                        return (
                            <div className="item">
                                <p>image</p>
                            </div>
                        )
                    default:
                        return <p>other</p>
                }
                
            } )}

        </div>

    );

};

React JSX 中的映射和切换

Map and Switch in React JSX

javascript

switch-statement

jsx

reactjs