【发布时间】：2026-01-20 16:55:02
【问题描述】：
为了应对挑战并帮助我学习 Stenciljs，我想将团队所做的一些 React 组件转换为 Stencil 组件。
我不知道 React 和一点点 Stenciljs，但我知道 Angular。我知道 Stenciljs 是来自不同“框架”的好东西的混合体，所以我大概能理解一点。 :-)
关于组件移植有什么建议吗？
可行吗？
有人做过这种事吗？如果是这样，任何可能有用的示例或步骤都会很好。
谢谢
【问题讨论】：
【发布时间】：2026-01-20 16:55:02
【问题描述】：
我们将在接下来的几周内做同样的事情，看起来很容易。
我们已经将 react 与 Typescript 一起使用，因此我们已经有了用于 props 和 state 的接口，只需使用装饰器 @Prop() 和 @State() 重写即可。
因为在模板中你也有一个render() 函数，类似于反应类组件，你可以复制你的反应render() 函数的代码（或者如果你有一个基本上只包含一个@987654325 的功能性反应组件@函数，复制所有内容）。
需要注意的一点是，react 中的 {children} 比 stencil 中的 <slot /> 强大得多。因此，如果您有更大的组件和很多父/子关系，那么翻译就不会那么容易，因为据我所知，您无法执行slot.map(item => <SomethingElse prop="stuff" />) 之类的操作。
【讨论】：
-
嗨@Schadenn，当前的反应组件项目使用 bootstrap-sass，他们定义了 4 个其他通用 scss 文件（common-ux、配置、自定义、预自定义），它们在其中导入 bootstrap-sass 资产和他们自己的one + 每个组件都有自己的 scss。如何使用 Stencil 进行管理？ stencil-sass 就够了吗？谢谢
-
取决于您的 .scss 文件：StencilJS 使用影子 dom，因此如果您的 .scss 严重依赖 DOM 元素并使用很多父/子关系（div > h3 > span 或类似的东西） )，你会遇到问题。如果 .scss 是干净的并且只使用类名（.my-component > .my-component-child 等），你应该没问题。只需在每个组件的 @Component 装饰器中指定所有 .scss 文件即可。 Stencils 构建过程应该能够为每个组件找出所有必要的 css，并将其捆绑在使用 build 生成的 .js 文件中。
-
但是，如果您要对现有组件进行大规模重写，请记住，这可能是清理 css 的最佳时机（通常是 4 个扩展 bootstrap 声音的大 scss 文件有点糟糕的设置），引入新的样式或类似的东西。
-
我想我成功了。 :-) 现在，我需要找到 props.children 和 ref={this.props.ref} 的等价物。有什么偶然的想法吗？ :-)
-
props.children 类似于
- 只是将您写入的任何内容插入到组件 .jsx 中创建的组件标签中。问题是你真的不能用 做任何事情 - 你不能 .map 它，不能 .filter 它等等。如果你需要这样的操作，你需要使用 document.getElementsByTagName() 或其他东西来访问你的孩子与你父母相似。