是否可以导入变量并在函数中使用它们?

Question

我正在 React 中试验 Google Maps API，我有这个函数，它可以在检查 API 数据是否正确检索后创建信息窗口以绑定到标记：

createInfoWindow( marker, infoWindow ) {
fetchData ? infoWindow.setContent( infoWindowContent ) : 
infoWindow.setContent( infoWindowError );
infoWindow.open( map, marker );
}

现在，而不是直接在 .setContent(( 方法中定义信息窗口内容，如下所示：

infoWindow.setContent(
'</div>' +
'<h2>Title: ' + marker.title'</h2>' +
'<p>Coords: ' + marker.position'</p>' + 
'</div>'
) ...

我宁愿在另一个文件中定义内容，然后在方法内部导出常量，如下所示：

文件： 信息窗口.js

export const infoContent = `<div>...</div>`;

然后简单地：

import { infoContent } from "./InfoWindow.js";   
infowWindow.setContent( infoContent ) ...

澄清一下，我想知道这样做是否是一种好的做法，因为我对 React 非常陌生，而且对 ES6 也不了解。谢谢！

PS：不幸的是，我目前无法测试这是否返回任何错误，但是一般的"无论如何你都不应该这样做，因为......"会做:)

Answer 1

绝对鼓励将HTML内容解耦以保持IMO的可读性。为了允许您传递marker，我建议使用 getter 实用程序函数，并将其导出：

export function getInfoContent({ title, position }) {
return `…` // HTML content, you can use title and position from marker here
}

然后调用吸气器并传入marker：

infoWindow.setContent(getInfoContent(marker))

我相信这比内联 HTML 模板文字更具可读性，并将它们解耦，使其对读者更具声明性。另外关于你的三元表达式的旁注：

fetchData ? infoWindow.setContent( infoWindowContent ) : 
infoWindow.setContent( infoWindowError );

一般的想法是不要让条件运算符来执行两个不同的调用，而是使用运算符来选择传递的表达式：

infoWindow.setContent(fetchData ? infoWindowContent : infoWindowError);