javascript - preactjs 看到 [Object object] 而不是链接

Question

我正在使用 preactjs 创建我的应用程序。最重要的是，我正在使用剑道网格。在网格内，我想显示一个超链接。如果用户点击链接，它应该改变路线。为了呈现链接，我使用了 preact-router。

这是工作 fiddle .

let { h, render, Component } = preact; 
// import { ... } from 'preact';

let { route, Router, Link } = preactRouter;
/** @jsx h */


class App extends Component {


componentDidMount() {
       console.log('did mount !');
    $("#grid").kendoGrid({
    selectable: "multiple cell",
    allowCopy: true,
    columns: [
        { field: "productName",
                template: function(e) {
                   return <link href="/">Home</link>
        } },
        { field: "category" }
    ],
    dataSource: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
    ]
});
      };

    render({}, {  }) {
        return (
            <div>
                    <h1>
                        Preact Kickstart
                        <sub>powered by <a href="https://github.com/developit/preact" target="_blank">preact</a></sub>
                    </h1>
                <div id="grid"></div>
                </div>


        );
    }
}




// Start 'er up:
render(<App />, document.body);

Answer 1

这甚至与 preact 无关。

您正在做的是在 preact 组件内使用 via jquery 渲染剑道网格，并使用 preact 组件作为模板。

解决这个问题的一种方法是返回一个 html 字符串:

template: function(e) {
    const linkEl = $('<a>')
        .attr('href', '#') // keep the a el but do not redirect to a different page on click
        .text('Home')
        .click((e) => {
             e.preventDefault(); // prevent the original a tag behavior
             route('/'); // this is using the `route` from preactRouter, which is already included at the top of the original file
         });
    return linkEl[0].outerHTML; // access the JS DOM element from jQuery element and get it's full html 
}

我还替换了 link (这是一个错字，可能应该是 Link )与 a标记，因为没有 link基本 html 中的元素。即使名称错误，这仍然有效，因为 JSX 转换器会将所有小写组件解释为字符串名称，而不是将组件用作函数(see how Babel compiles it)。变压器将生成 h("link", { href: "/" }, "Home")和 h函数返回一个对象，然后将其呈现为 [Object object]因为当您尝试通过 .toString 转换为字符串时会发生这种情况功能。如果 preact 在这种情况下可以工作，它将呈现实际的 <link href="/">Home</link>。给用户，这不会有所需的行为(除非在其他地方定义了自定义 link 组件)。

你不能在这里返回一个 preact 组件，因为剑道网格模板需要一个字符串模板。一种方法是将 preact 组件转换为字符串，但我不确定这是否可行，我从未见过它完成，你不应该这样做。

---

注意:如前所述，您不必将 React 或类似 React 的小部分转换为 html。我强烈建议不要将 preact 代码与 jQuery 混合使用，这会在您的情况下呈现剑道网格。这两个库进行渲染的方式非常不同。虽然 jQuery 使用的是直接修改 DOM 并替换整个子树的旧方法，但 React(以及所有实现，例如 preact)正在渲染到虚拟 DOM，然后具有内部逻辑来找出与用户实际 DOM 的差异只看到并显示最小的差异，因此它需要最少的更新。通过我的快速谷歌搜索，我找到了 react-kendo ，但似乎不太受欢迎。 kendo 团队自己也有一些博文，但我没有找到任何官方支持。如果你想使用 preact，试着找到 (p)react 的方式来做它，对于你的例子，你可以使用像 react-table 这样的东西。 (official demo)。另一方面，如果你想使用 kendo 提供的强大的 UI 工具，你最好不要将 preact 添加到组合中，它会使事情变得更复杂而没有太多好处，甚至会使整个事情变得更糟。