Question

我在智能组件中触发onMount时尝试渲染组件。服务器似乎正确地呈现组件，但是当客户端触发onMount时它不呈现，我得到一个简单的undefined。

const button = require('src/client/components/a-button');
console.log(button); // --> { path: '/home/karl/dev/instanty/node/src/client/components/a-button.marko.js', _: [Getter/Setter], '$__shouldBuffer': true, meta: {} }


const htmlServer = button.renderToString({ label: 'Click me!' }); // <-- works
console.log(htmlServer);

module.exports = class {
  onMount() {
    console.log(button); // --> Template {path: undefined, meta: undefined, _: function}

    const html = button.renderToString({ label: 'Click me!' }); // <-- does not work
    console.log(html);
  }
  //... more code
}

我需要此处所述的组件：http://markojs.com/docs/rendering/#rendering

我也使用套索，我怀疑这可能是它无法正常工作的原因。我怀疑套索没有捆绑组件并将其发送给客户端。

我还阅读了以下内容：http://markojs.com/docs/lasso/#client-side-rendering

Answer 1

这是由于Marko v4的限制。 Marko v4旨在渲染[V] DOM节点而不是浏览器中的HTML字符串。如果您确实需要HTML字符串，则需要使用类似于以下内容的代码从DOM节点获取HTML字符串：

const html = button.renderSync({ label: 'Click me!' })
    .getNode().firstChild.outerHTML;

注意：getNode()返回DocumentFragment节点，因为UI组件可能会呈现多个顶级HTML元素。我们在上面的代码中使用firstChild来获取DocumentFragment之外的第一个节点，并假设它是您感兴趣的HTML元素节点。

话虽如此，我们应该更新文档以使其清楚（或实现toString()，即使它确实不需要）。

简单的客户端呈现无法正常工作

1 个答案: