如何在maquettejs的映射组件中使用函数答案

【问题标题】：How to use a function in a mapped component in maquettejs如何在maquettejs的映射组件中使用函数
【发布时间】：2018-02-12 23:20:54
【问题描述】：

当我尝试在 createMapping 组件中使用函数时，我目前遇到问题，这是代码

itemConcurso.js

import {h, createMapping} from 'maquette';

    function enterAnim(domNode, properties) {
        domNode.className += ' animated fadeInUp';
    }

    const item = createMapping(
        function getSourceKey(source) {
            console.log(source);
            return source;
        },
        function createTarget(item, i) {
            return (func) => {

                const helper = () => { func(item.Id) };

                return {
                    renderMaquette: function() {
                        return h(`ul#${item.Id}.item-concurso.list-group.mt-3`, { key: item.Id, enterAnimation: enterAnim, onclick: helper}, [
                            h('li.list-group-item.list-group-item.list-heading-primary', [
                                h('div.pull-right', [
                                    h('h4', item.Ministerio__c)
                                    ]), 
                                h('h3', item.Name.toUpperCase())
                                ]),
                            h("li.list-group-item", [   
                                h('h4', item.activity),
                                h('ul', [
                                    h('li', ['Perfil buscado: ', item.Nombre_de_perfil__c]),
                                    h('li', ['Conocimientos requeridos: ', item.Conocimientos_tecnicos_requeridos__c]),
                                    h('li', ['Descripción: ', item.Descripcion__c]),
                                    ])  
                                ])
                            ]);
                    }
                }
            };
        },
        function updateTarget(updatedSource, target) {
            console.log(updatedSource);
        });

    export default item;

App.js

function probando(id) {
    console.log(id);
}

const app = function() {
    return {
        renderMaquette: function() {
            return h('div#concurso', [
                searchB.renderMaquette(),
                itemConcurso.results.map(function(component) {
                    return component(test).renderMaquette();
                })]);
        }
    }
}

它确实有效，但是在我第一次单击该组件时，它会引发以下错误：

vendor.bundle.js:15132 Uncaught Error: Functions may not be updated on subsequent renders (property: onclick). Hint: declare event handler functions outside the render() function.
    at updateProperties (vendor.bundle.js:15132)
    at updateDom (vendor.bundle.js:15370)
    at updateChildren (vendor.bundle.js:15241)
    at updateDom (vendor.bundle.js:15369)
    at Object.update (vendor.bundle.js:15393)
    at doRender (vendor.bundle.js:15636)

我尝试了很多东西，但似乎有些东西我不明白

【问题讨论】：

标签： javascript mapping frontend maquette

【解决方案1】：

代码的问题是createTarget 返回一个函数，该函数在app.renderMaquette 期间生成新的{renderMaquette: ...} 实例。

因为这些实例是新的，所以会创建一个新的助手，因此会出现错误。

如果你想将一个函数传递给项目，你可以导出一个函数createItem(func)而不是export default item

【讨论】：