Reactjs .NET中的功能永远无法达到 - 如何在渲染中调用简单的箭头函数

Question

我正在设置我的第一个reactjs.s.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'));

Answer 1

您的 test功能就是一个函数。JSX不知道该怎么办。<Test />可能会实例化反应组件。{test}将插值一些JavaScript值。您的电话都没有。它在页面上贴上一个不渲染且未执行的函数。

如果要调用test函数，则像其他任何JavaScript函数一样称呼它：{test()}。