javascript - 将自定义模板传递给模板组件
问题描述
我正在使用 Stencil 创建一个自定义组件来复制UI-select
.
该组件将像这样使用:
let items = [{name:"Abc", age: 10}, {name:"Xyz", age: 10}];
let itemString = JSON.stringify(items);
<dropdown-search placeholder="Select User" item-string='${itemString}'>
</dropdown-search>
然后组件定义为
import {
Component,
State,
Prop,
Element,
} from '@stencil/core';
@Component({
tag: 'dropdown-search',
})
export class DropdownSearch {
@Element() dropdownEl: HTMLElement;
@State() isOpen: boolean = false;
@State() items: any = [];
@Prop() itemString: string = '';
@Prop() placeholder: string = '';
componentDidLoad() {
try {
this.items = JSON.parse(this.itemString);
} catch(e) {}
}
onClickDropdownHandler = (e: UIEvent) => {
e.preventDefault();
this.toggleDropdown();
}
toggleDropdown = () => {
this.isOpen = !this.isOpen;
if (this.isOpen) {
window.setTimeout(
() => {
this.dropdownEl.querySelector('input').focus();
},
0,
);
}
}
renderOptions = () => {
if (!Array.isArray(this.items) || !this.items.length) {
return null;
}
return this.items.map((item) => (
<li
>
<a href="javascript:" title="{item.name}">
{item.name}
<small class="d-block">age: {item.age}</small>
</a>
</li>
));
}
render() {
let dropdownClassName = (this.isOpen ? 'open' : '');
return (
<form name="myForm">
<div class="form-group">
<div
class={`btn-group dropdown ${dropdownClassName}`}
>
<button
class="btn btn-default dropdown-toggle"
onClick={this.onClickDropdownHandler}
>
{this.placeholder}
</button>
<ul class="dropdown-menu" role="menu">
<li>
<div class="input-group input-group-search">
<input
class="form-control"
type="search"
/>
</div>
</li>
{this.renderOptions()}
</ul>
</div>
</div>
</form>
);
}
}
这些项目渲染得很好。由于用户可以传递自定义的对象数组,所以我需要自定义选项模板。因此用户可以在使用组件时传递它。
现在我正在为组件中的选项使用静态模板,比如
<a href="javascript:" title="{item.name}">
{item.name}
<small class="d-block">age: {item.age}</small>
</a>
但我需要一种方法从我使用模板的地方传递这个模板。我不能在那里使用插槽,因为我在循环运行的所有选项中使用相同的模板。
解决方案
我是模板新手,但只是尝试为此使用 @Prop 函数,并且它起作用了:
零件
@Component({
tag: 'dropdown-search',
styleUrl: 'dropdown-search.css',
shadow: true,
})
export class DropdownSearch {
// allow template function to be passed from outside
@Prop template!: (item: SelectItem) => any;
@State items!: SelectItem[] = [{name: 'dog'}, {name: 'cat'}, {name: 'elephant'}];
render() {
return (
<Host>
<p>Before Template</p>
{/* render the custom template here: */}
{this.items.map(item => this.template(item))}
<p>After Template</p>
</Host>
);
}
}
为该组件提供自定义模板:
class AppComponent {
render() {
// Here we define our custom template to be rendered in MyComponent
const CustomTemplate = (item: SelectItem) => <p key={item.name}>Hi, I am {item.name}</p>;
return (
<div class="app-home">
<dropdown-search template={CustomTemplate} />
</div>
);
}
}
结果如下所示:
推荐阅读
- excel - 获取由随机文本包围的单个单元格中有多个组名的组名总数
- autodesk-viewer - 如何在属性面板中添加第二列值?
- go - 在每个 BookName 之后的 booksName 数组中添加分号,如何将最后一个分号更改为 (And)
- javascript - 具有相同名称的函数 param 和 let/const 会引发错误
- cron - cron 是否有 cron 语法的权威标准文档?
- mvvm - 如何在 xamarin 表单中实现可扩展的 ListView
- controls - 使用 IRremote Arduino ESP8266 进行未知编码
- node.js - 为什么串行端口写入不适用于 for 循环?
- sql - 如何在 postgesql 的连接表中复制一行?
- mysql - 在 oracle 中使用正确的连接可以解决问题