Question

我正在使用preactjs来创建我的应用程序。除此之外，我使用的是kendo网格。在网格内部，我想显示一个超链接。如果用户点击链接，则应更改路线。为了呈现链接，我正在使用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（这是一个错字，可能应该是link） HTML。即使名称错误，这仍然有效，因为JSX转换器会将所有小写组件解释为字符串名称，而不是将组件用作函数（see how Babel compiles it）。变换器将生成h("link", { href: "/" }, "Home")并且h函数返回一个对象，然后将其呈现为[Object object]，因为当您尝试通过.toString函数转换为字符串时会发生这种情况。如果预处理在这种情况下有效，它会向用户呈现实际的<link href="/">Home</link>，这将不具有所需的行为（除非在其他地方定义了自定义link组件）。

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

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

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

1 个答案: