永远不会达到 Reactjs .NET 中的函数——如何在渲染中调用一个简单的箭头函数?

Function in Reactjs .NET is never reached - how to call a simple arrow function inside render?

我正在设置我的第一个 ReactJS.net 应用程序,并按照网站上的教程进行操作。

我在它的基础上做了更多,我的 App.jsx 文件中有以下代码:

let test = () => {
    console.log('called!');
    return "<p>Testing</p>";
} 

var CommentBox = React.createClass({
    render: function () {
        return (
            <div className="commentBox">

                Hello, world! I am a CommentBox.
                <test /> // tried both but neither worked
                {test}
      </div>
        );
    }
});

ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);

如果我没记错的话,类似的代码通常可以在正常的 React.js 应用程序中运行。然而,这根本就没有调用测试方法(从未到达控制台日志,我没有看到我的 test 函数的输出。

现在,我在这里做错了什么? :-)

为什么我没有看到 <p>Testing</p>

生成的JS代码如下:

// @hash v3-310AECBD0B84ED139C81E87801CA7DBDFA284566
// Automatically generated by ReactJS.NET. Do not edit, your changes will be overridden.
// Version: 3.3.0 (build 8c1c474) with Babel 6.7.7
// Generated at: 01-04-2018 17:37:43
///////////////////////////////////////////////////////////////////////////////
var test = function test() {
    console.log('called!');
    return "Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing ";
};

var CommentBox = React.createClass({
    displayName: "CommentBox",


    render: function render() {
        return React.createElement(
            "div",
            { className: "commentBox" },
            "Hello, world! I am a CommentBox.",
            React.createElement("test", null),
            test
        );
    }
});

ReactDOM.render(React.createElement(CommentBox, null), document.getElementById('content'));

test 函数就是一个函数。 JSX 不知道该怎么做。 <Test /> 大概会实例化一个 React 组件。 {test} 会插入一些 javascript 值。你的电话两者都没有。它在页面上粘贴了一个不呈现也不执行的函数。

如果你想调用你的 test 函数,你可以像调用任何其他 javascript 函数一样调用它:{test()}.