reactjs - 在 map 函数中设置变量

标签 reactjs ecmascript-6

我有一个函数返回这个 jsx 与一些类似这样的代码:

showMedia = () => {

  return (
            <div>
                {
                    <div id="mainContent">
                        {props.files.map((file) =>
                            const ext = fileExtension(file.name),
                            const icon = fileIcon(ext),
                            const isImg = isImage(ext),
                            <div key={file.id}>
                                <DisplayResults
                                    fileId={file.id}
                                    downloadName={file.downloadName}
                                    fileTitle={file.title}
                                    isImg={isImg}
                                    icon={icon}
                                    ext={ext}
                                />
                            </div>
                        )}
                    </div>
                }
            </div>
         );
}

在我的编辑器中,它表示我在 .map 之后设置的 const 变量需要一个“{”

我使用的语法不正确吗?

谢谢!

最佳答案

由于您的箭头函数没有函数体 {},因此它需要隐式返回的表达式。

给它一个函数体并声明变量并返回 JSX:

showMedia = () => {
  return (
    <div>
      {
        <div id="mainContent">
          {props.files.map(file => {
            const ext = fileExtension(file.name);
            const icon = fileIcon(ext);
            const isImg = isImage(ext);
            return (
              <div key={file.id}>
                <DisplayResults
                  fileId={file.id}
                  downloadName={file.downloadName}
                  fileTitle={file.title}
                  isImg={isImg}
                  icon={icon}
                  ext={ext}
                />
              </div>
            );
          })}
        </div>
      }
    </div>
  );
};

关于reactjs - 在 map 函数中设置变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51385644/

相关文章:

javascript - 如何使用 typescript 继承 native react 组件?

reactjs - 如何使用 react 导航预加载路线

javascript - ES6 从一个方法调用另一个方法

javascript - 在父元素上调用函数给出 'super' 关键字意外

javascript - 如何在 useEffect 中管理两个函数

javascript - 即使在启用 express CORS 中间件后,axios 请求上的 Access-Control-Allow-Origin 错误

javascript - 如何在 reactstrap 中使用 onMouseEnter?

javascript - Firefox 和 Node.js 之间的解释差异

ember.js - 如何将 bower 包作为 ES6 模块访问?

javascript - 字符串将双引号替换成大括号