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>'
 ) ...

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

文件：InfoWindow.js

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

然后简单地：

import { infoContent } from "./InfoWindow.js";   

infowWindow.setContent( infoContent ) ...

请澄清一下，我想知道这样做是否是一个好习惯，因为我是React的新手，对ES6的了解也不多。谢谢！

P.s .：很遗憾，我目前无法测试它是否返回任何错误，但总的来说，“无论如何，您都不应这样做，因为...”会这样做：）

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);

可以导入变量并在函数内部使用它们吗？

1 个答案: