Render Multiple Templates

同学们好，咱们今天聊聊Lightning Web Components里一个挺实用的技巧——如何让一个组件根据不同的状态，渲染出完全不同的界面结构。这就要用到多模板渲染。 首先，组件是可以导入多个HTML文件的。你可以在组件的JavaScript里，把这些HTML文件都导入进来当做模板引用。然后呢，重写一下组件自带的 `render()` 方法。在这个方法里，根据当前组件的某个状态值，比如一个叫 `isEditMode` 的属性，来决定返回哪一个模板。这样一来，当 `isEditMode` 是 true 时，组件就显示编辑界面；是 false 时，就显示查看界面，两个界面完全可以长得不一样。每个额外的模板也都允许拥有自己的CSS文件，文件名和模板保持一致就行，这样样式也能独立控制，不会有冲突。 默认情况下，如果你不重写 `render()`，它会自动去找和组件同名的HTML模板来渲染，这是最常规的用法。 但是，这里要敲一下黑板。在真实的项目中，Salesforce其实更加推荐咱们用另一种更简单的方式：在单个模板文件里直接使用 `lwc:if`、`lwc:elseif` 和 `lwc:else` 这些指令，来切换显示不同的区块。这样做代码集中，维护起来也方便。那什么时候才用导入多个模板的招数呢？只有当不同状态需要的标记结构是真真正正完全不同，比如说骨架屏和完整内容区的HTML结构差别巨大，那用多模板就会很合适。这种用法，有点像 JavaScript 框架里的代码拆分，按需加载不同的视图结构。 简单总结一下：如果你只是几块内容的显示和隐藏，用 `lwc:if` 就足够；如果整个组件的结构都因为状态变了而彻底不同，那你就可以考虑导入多个HTML模板，重写 `render` 方法来实现。记好这一点，以后写组件就能游刃有余了。