我熟悉Angular并了解React的基础知识.我正在探索模板文档,我发现模板组件有@Component装饰器和render()功能 -
component.tsx
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-first-component',
styleUrl: 'my-first-component.scss'
})
export class MyComponent {
// Indicate that name should be a public property on the component
@Prop() firstName: string;
render() {
return (
<p>
My name is {this.firstName}
</p>
);
}
}
帮助我理解它与角度和反应有何不同以及它是如何工作的？
reactjs ionic-framework stenciljs stencil-component stencil-compiler
我目前正在尝试使用StencilJS来创建一些Web组件.
现在我知道有<slot />和名称插槽和所有东西.来自React,我猜插槽与React中的儿童类似.你可以在React中使用孩子做很多事情.我经常做的事情:
你会如何使用插槽/网络组件/ stencilJS？
我可以使用Stencil获取我的Web组件的主机元素
@Element() hostElement: HTMLElement;
我使用我的组件
<my-custom-component>
<button>1</button>
<button>2</button>
<button>3</button>
</my-custom-component>
我想渲染类似的东西
render() {
return slottedChildren ?
<span>No Elements</span> :
<ul class="my-custom-component">
slottedChildren.map(child => <li class="my-custom-element>{child}</li>)
</ul>;
}
亲切的问候
我正努力让stenciljs的@Method工作 - 任何帮助都会受到赞赏.
这是我的组件代码,其中包含一个名为setName的函数,我希望在我的组件上公开:
import { Component, Prop, Method, State } from "@stencil/core";
@Component({
tag: "my-name",
shadow: true
})
export class MyComponent {
@Prop() first: string;
@Prop() last: string;
@State() dummy: string;
@Method() setName(first: string, last: string): void {
this.first = first;
this.last = last;
this.dummy = first + last;
}
render(): JSX.Element {
return (
<div>
Hello, World! I'm {this.first} {this.last}
</div>
);
}
}
这是引用该组件的html和脚本:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta …我已经使用启动项目创建了一个 stenciljs web 组件，并且我试图通过package.jsondependentecy 将其抓取到另一个 stenciljs 项目中，该项目指向 git 存储库。
Web 组件已导入，但当我尝试在 tsx stenciljs 项目中运行该组件时，我注意到以下内容：
.svgs推送到.tsx文件中的 return 语句，即使在页面上添加字符后，这些图标仍然不会呈现不确定我在这里是否做错了什么，奇怪的是，只要我在页面上添加其他内容（除了该 Web 组件之外），它就会正确呈现。
我通过以下方式将 Web 组件导入到 stenciljs 项目内的组件中：
import 'my-component-from-git' <-- 指向node_modules文件夹中的webcomponent文件夹
stenciljs web 组件配置：
plugins: [
sass()
],
namespace: 'my-component',
outputTargets: [
{
type: 'dist',
esmLoaderPath: '../loader',
},
{
type: 'dist-custom-elements-bundle',
},
{
type: 'docs-readme',
},
{
type: 'www',
serviceWorker: null, // disable service workers
},
],
stenciljs 项目配置：
globalStyle: 'src/global/app.css', …我无法让全局 css 变量按照 ionic stencil docs中的描述工作。
我在 'src/global/' 中创建了一个 'variables.css' 文件，然后将“globalStyle: 'src/global/variables.css'”放入“stencil.config.ts”文件中。
然后我在 variables.css 中创建了一组 css 变量，并尝试在我组件的 css 文件中使用它们；但是，使用默认值是因为它无法加载全局变量。
// stencil.config.ts
import { Config } from '@stencil/core';
export const config: Config = {
namespace: 'mycomponent',
outputTargets:[
{
type: 'dist'
},
{
type: 'www',
serviceWorker: null
}
],
globalStyle: 'src/global/variables.css'
}
// src/global/variables.css
:root {
--qa-primary-color: #2169e7;
--qa-secondary-color: #fcd92b;
--qa-dark-color: #0000;
--qa-light-color: #ffff;
--qa-font-family: Arial, Helvetica, sans-serif;
--qa-font-size: 12px;
}
// src/components/my-component.css
.main {
background: var(--qa-dark-color, yellow);
}
.first { …我正在尝试将图像插入使用Stencil构建的Web组件中。
我遇到2个错误：
AppLogo is declared but its value is never read.
和
Cannot find module ../assets/logo.svg.
目录：
- src
-- components
--- app-header
---- assets
----- logo.svg
---- app-header.tsx
---- app-header.scss
---- app-header.spec.ts
码：
import { Component } from "@stencil/core";
import AppLogo from "../assets/logo.svg";
@Component({
tag: "app-header",
styleUrl: "app-header.scss"
})
export class AppHeader {
render() {
return (
<header class="app-header">
<a href="#" class="app-logo">
<img src="{AppLogo}" alt="App Name" />
</a>
</header>
);
}
}
（我可以找到）关于此的大量文档。因此，感谢您的帮助。
根据文档，Stencil 组件的属性 myProperty
@Prop({attribute: "my-prop"})
public myProperty?: object = {};
应使用此 HTML 代码进行设置：
<my-component my-prop="{hello: 'world'}" ></my-component>
但是，它被设置为默认值（空对象）。布尔值和字符串值工作正常。
这是一个错误，还是我忽略了一些东西？
我有一个 Stencil 组件，作为其业务逻辑的一部分，我需要使用外部 Javascript 文件mylib.js。Javascript 文件包含一些 Stencil 组件应该使用的业务逻辑。
这是我的组件：
import { Component, Element, Prop, h, Host } from '@stencil/core';
import moment from 'moment';
import mylib from 'src/js/mylib.js';
@Component({
tag: 'dashboard-widget',
styleUrl: 'dashboard-widget.css',
shadow: false
})
export class DashboardWidget {
@Element() el: HTMLElement;
@Prop() canvas: HTMLElement;
@Prop() channelName: string = "";
@Prop() channelValue: string = "";
@Prop() isBlinking: boolean = true;
componentDidLoad() {
console.log(mylib.test());
}
render() {
return (
<Host>
<div class="card-content card-content-padding">
<b>{this.channelName}</b>
<h1 class="dashboard-card-value">{this.channelValue}</h1>
<canvas class="dashboard-card-canvas"></canvas>
</div> …