preactjs看到的是[对象对象]而不是链接

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呈现kendo网格，并使用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标记，因为在basic html中没有link元素。即使名称是错误的，它仍然可以工作，因为JSX转换器会将所有小写的组件解释为字符串名称，而不是使用组件作为函数(see how Babel compiles it)。转换器将生成h("link", { href: "/" }, "Home")，h函数返回一个对象，然后将该对象呈现为[Object object]，因为这就是您尝试通过.toString函数转换为字符串时所发生的情况。如果preact在这种情况下可以工作，它将向用户呈现实际的<link href="/">Home</link>，这将不会具有所需的行为(除非在其他地方定义了自定义link组件)。

您不能在此处返回preact组件，因为kendo网格模板需要字符串模板。一种方法是将preact组件转换为字符串，但我不确定这是否可行，我从未见过这样做，您也不应该这样做。

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