在CreateElement中定义并调用一个方法

时间:2017-05-02 11:16:22

标签: javascript reactjs

我是reactjs的新手并且还在学习,我需要定义一个方法并在Reactjs中的CreateElement中调用该方法。不确定这是否可行,或者我可能以错误的方式做某事。

我正在尝试测试一个在其中具有if-else条件的方法,基于该文本应该被视为思考反应。

render: function render() {
    test_method:  function test_method(){  // <= if this should be placed here or 
    // outside render, Tried placing it outside render with this.
    // but not reading the value of a
    if (this.a == true){
        return a;
    } else {
        return b; 
    },

    React.createElement(
        'li',
        null,
        this.test_method
    );
};

2 个答案:

答案 0 :(得分:1)

首先,作为createElement的参数,当您通过this.test_method时,您应该使用this.test_method()。第一个,this.test_method将传递函数本身。第二个,添加了(),将调用该函数并传入该函数返回的内容 - 即您的子元素。

至于您的test_method,您可以采取以下几种方式:

1)将test_method定义为渲染函数中的变量

render: function render() {
    const test_method = () => { 
        if (this.a == true){
            return a;
        } else {
            return b; 
        }
    }

    return React.createElement(
        'li',
        null,
        test_method()
    );
};

2)将它拉到你的渲染之外,但是将它的值绑定到你的类中的函数&#39;构造函数。类似的东西:

constructor: function(props) {
    super(props)
    this.test_method = this.test_method.bind(this)
}

test_method: function() { 
    if (this.a == true){
        return a;
    } else {
        return b; 
    }
}

render: function render() {
    return React.createElement(
        'li',
        null,
        this.test_method()
    );
};

答案 1 :(得分:0)

试试这个:

q.gsub(/([^a-zA-Z0-9.])/, ' \1 ')
#=> Frozen / Chilled / Ambient    ( Please   state ) 

现在我无法证明它,但必须去那里。在任何情况下,以下可能更简单:

var glb_srl_no=0;  

type: 'POST',
                    url: invurl,
                    cache: false,
                    data: "{'" +
                        "fromdate':'" + $("#txtInvReportledgerFromDate").val() + "','" +
                        "todate':'" + $("#txtInvReportledgerToDate").val() + "','" +
                        "Itemname':'" + $("#dataItemId").val() +
                     "'}",

                    contentType: 'application/json; charset=utf-8',
                    dataType: 'JSON',

                    success: function (data) {
glb_srl_no=0;
                        if (data.d.length > 0) {

                            for (var index = 0; index < data.d.length; index++) {
glb_srl_no=parseInt(glb_srl_no)+1;
                                $("#lblitemname").text(data.d[index].ITEM_NAME);
                                $("#lblitemcode").text(data.d[index].ITEM_CODE);
                                $("#lblInventoryQtyason").text(data.d[index].TodayClosingStock);
                                $("#lblStockStatusunitprice").text(data.d[index].Todaystockunitprice);
                                if (Itemcolorindex == index) {
                                    Itemcolor = "background-color:white";
                                    Itemcolorindex = Itemcolorindex + 2;
                                }
                                else {
                                    Itemcolor = "background-color:#EFF3FB;";
                                }


                                $("#tblinvledgerreport").append("<tr style=" + Itemcolor + ">" +


                                                             "<td  align='left'>" + glb_srl_no + "</td>" 
                                                        +"<td  align='left'>" + data.d[index].TYPE + "</td>" +
                                                     "<td align='center'>" + getOldDate(data.d[index].DATE) + "</td>" +
                                                     "<td align='left'>" + data.d[index].TransactionDescription + "</td>" +
                                                     "<td align='left'>" + data.d[index].ReferenceDoc + "</td>" +
                                                    "<td align='center'>" + (data.d[index].QTYReceipts == null ? '' : data.d[index].QTYReceipts) + "</td>" +
                                                     "<td align='center'>" + (data.d[index].UNITPRICEReceipts == null ? '' : data.d[index].UNITPRICEReceipts) + "</td>" +
                                                     "<td align='center'>" + (data.d[index].QTYISS == null ? '' : data.d[index].QTYISS) + "</td>" +
                                                    "<td align='center'>" + (data.d[index].UNITPRICEiss == null ? '' : data.d[index].UNITPRICEiss) + "</td>" 

                                                                "</tr>");
                            }

                            $("#tblinvledgerreport").append("</tbody>");



        "<td align='center'>" + (data.d[index].QTYISS == null ? '' : data.d[index].QTYISS) + "</td>" +                                                   "<td align='center'>" + (data.d[index].UNITPRICEiss == null ? '' : data.d[index].UNITPRICEiss) + "</td>" 
                                                            "</tr>");
                        }
                        $("#tblinvledgerreport").append("</tbody>");**