1

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

这是工作小提琴。

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);
4

1 回答 1

2

这甚至与 preact 无关。

您正在做的是通过 jquery 在 preact 组件中使用 preact 组件并使用 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（这是一个错字，可能应该是），因为基本 html 中没有元素。即使名称错误，这仍然有效，因为 JSX 转换器会将所有小写组件解释为字符串名称，而不是将组件用作函数（请参阅 Babel 是如何编译它的）。转换器将生成并且函数返回一个对象，然后将其渲染为因为这是当您尝试通过函数转换为字符串时发生的情况。如果 preact 在这种情况下可以工作，它会将实际呈现给用户，这不会具有所需的行为（除非在其他地方定义了自定义组件）。Linkalinkh("link", { href: "/" }, "Home")h[Object object].toString<link href="/">Home</link>link

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

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

于 2017-08-04T20:12:21.300 回答