Stencil.js：如何通过外部模板字面量提供JSX模板？

看起来你想做的是让你的股价Widget组件能够接受外部传入的自定义布局模板，并且模板里的占位符能正确渲染组件内部的动态股价数据。先分析下你之前两种方法没成功的原因，再给你几个可行的解决方案：

为什么你的原有方法不生效？ #

方法一：Slots（React/Stencil中的Children） #

你在外部写的<span>{ this.price }</span>里的this，指向的是外部上下文（比如父组件或者全局window），而不是你的Widget组件实例，所以根本拿不到组件内部的price值，自然无法渲染正确数据。

方法二：Template标签 #

Template标签里的内容默认是纯HTML文本，不会被JSX/React解析成可执行的代码，{this.price}会被当作普通字符串直接显示，而不是变量替换。而且Template本身只是一个内容容器，不会自动帮你绑定组件数据。

推荐解决方案（分技术栈） #

如果你用的是React/TSX组件：优先用「Render Prop」模式 #

这是React生态中最常用的让外部控制组件渲染内容的方式，核心是让组件接收一个返回JSX的函数，组件内部把动态数据传递给这个函数，外部就能用这些数据自定义布局了。

组件代码（my-component.tsx）

import React from 'react';

// 定义组件Props，renderLayout是一个接收数据并返回JSX的函数
interface StockWidgetProps {
  renderLayout: (data: { price: number }) => React.ReactNode;
}

export class StockWidget extends React.Component<StockWidgetProps> {
  private price: number = 0;

  componentWillMount() {
    // 模拟异步获取股价数据（替换成你的真实接口逻辑）
    setTimeout(() => {
      this.price = 148.75;
      this.forceUpdate();
    }, 1000);
  }

  render() {
    // 调用外部传入的渲染函数，把内部的price传进去
    return this.props.renderLayout({ price: this.price });
  }
}

外部使用方式

// 在父组件或者页面中使用
<StockWidget
  renderLayout={(data) => (
    // 这里完全自定义布局，用data.price获取组件内部的股价
    <div style={{ padding: '10px', border: '1px solid #eee' }}>
      <h3>实时股价</h3>
      <span style={{ fontSize: '24px', color: data.price > 150 ? 'green' : 'red' }}>
        ${data.price.toFixed(2)}
      </span>
    </div>
  )}
/>

这种方式的好处是灵活度极高，外部可以完全控制布局结构、样式，还能根据数据做逻辑判断（比如股价涨跌变色）。

如果你用的是Web Components（比如Stencil）：两种可选方案 #

方案1：传入渲染函数作为Prop

和React的思路类似，让组件接受一个函数Prop，组件调用这个函数并传入数据，外部返回要渲染的DOM元素。

// my-component.tsx（Stencil）
import { Component, Prop, State, h } from '@stencil/core';

@Component({
  tag: 'stock-widget',
  shadow: true,
})
export class StockWidget {
  @Prop() renderLayout?: (data: { price: number }) => HTMLElement;
  @State() price: number = 0;

  componentWillLoad() {
    setTimeout(() => {
      this.price = 148.75;
    }, 1000);
  }

  render() {
    // 如果外部传了渲染函数，就用它；否则用默认布局
    if (this.renderLayout) {
      return this.renderLayout({ price: this.price });
    }
    return <span>默认股价: ${this.price}</span>;
  }
}

外部使用（index.html）

<stock-widget id="my-ticker"></stock-widget>

<script>
  const ticker = document.getElementById('my-ticker');
  // 自定义渲染逻辑
  ticker.renderLayout = (data) => {
    const container = document.createElement('div');
    container.innerHTML = `
      <h4>今日股价</h4>
      <p style="font-size:20px">$${data.price.toFixed(2)}</p>
    `;
    return container;
  };
</script>

方案2：解析Template标签的占位符

如果你坚持想用Template标签，可以自定义占位符（比如{{price}}），然后在组件里手动替换成真实数据：

// my-component.tsx（Stencil）
import { Component, Prop, State, h } from '@stencil/core';

@Component({
  tag: 'stock-widget',
  shadow: true,
})
export class StockWidget {
  @Prop() templateId?: string;
  @State() price: number = 0;

  componentWillLoad() {
    setTimeout(() => {
      this.price = 148.75;
    }, 1000);
  }

  render() {
    if (!this.templateId) {
      return <span>默认股价: ${this.price}</span>;
    }

    // 获取外部的Template元素
    const template = document.getElementById(this.templateId) as HTMLTemplateElement;
    if (!template) return null;

    // 克隆Template内容
    const content = template.content.cloneNode(true) as HTMLElement;
    // 替换自定义占位符{{price}}
    this.replacePlaceholders(content, { price: this.price });

    return <div>{content}</div>;
  }

  // 递归替换所有文本节点中的占位符
  private replacePlaceholders(element: Node, data: { price: number }) {
    element.childNodes.forEach(node => {
      if (node.nodeType === Node.TEXT_NODE) {
        const textNode = node as Text;
        textNode.textContent = textNode.textContent
          .replace(/{{price}}/g, data.price.toFixed(2));
      } else if (node.nodeType === Node.ELEMENT_NODE) {
        this.replacePlaceholders(node, data);
      }
    });
  }
}

外部使用（index.html）

<template id="ticker-template">
  <div style="background:#f5f5f5; padding:8px; border-radius:4px">
    <span>当前股价：${{price}}</span>
  </div>
</template>

<stock-widget template-id="ticker-template"></stock-widget>

这些方案都能解决你的核心需求：让外部自定义布局，同时正确渲染组件内部的动态股价数据。根据你的技术栈选最适合的就行~

内容的提问来源于stack exchange，提问作者Manaday Mavani