Question

我有一个返回此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变量为'{'。

我使用的语法不正确吗？

谢谢！

Answer 1

由于您的箭头函数没有函数体{}，因此期望隐式返回表达式。

给它一个函数体并声明您的变量，然后返回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>
  );
};

Answer 2

您必须在map函数中添加“ return”，因为map总是希望返回某些内容，因此可以通过添加此内容来解决您的问题

{props.files.map(file => {
  return (
    <div key={file.id}>
      {/* something */}
    </div>
  );
})}

希望获得帮助

在地图函数中设置变量

2 个答案: