在 JavaScript 中的 NEXT 中组合函数调用和 HTML 标记

Question

假设我有一个名为 Foo() 的函数，它输出 "Hello world!"，我想创建一个名为 Bar() 的函数，它接受 Foo() 的输出，并且加粗它。期望的输出：

Hello world!

我尝试过的事情：

function Bar() {
    return <b>Foo()</b>;
}

输出：Foo()

function Bar() {
    var f = <b>Foo()</b>;
    return f;
}

输出：Foo()

function Bar() {
    var f = Foo();
    return <b>f</b>;
}

输出：f

function Bar() {
    return "<b>" + Foo() + "</b>";
}

输出：<b>[object Object]</b>

我需要做什么才能得到 Hello world! 作为输出？

Answer 1

如果你想在 JSX 中包含一个字符串，你必须将它添加到花括号中。这是一个例子：

function Bar() {
  return <b>{ Foo() }</b>;
}

Answer 2

我想出了如何去做，虽然对于来自 C# 和 C++ 的人来说并不明显。

您需要用大括号将 HTML 标记之间声明的所有代码括起来，如下所示：

function Bar() {
    return <b>{Foo()}</b>;
}

代码 {Foo()} 将运行函数 Foo 并获得其输出。这里也可以放变量，比如上面一行有var myfoo = Foo();，那么{myfoo}会解析成同样的输出。

Answer 3

您可以使用 DOM api 创建元素并将其 .innerText 属性设置为 Foo() 函数返回的值：

function Bar() {
  const boldElem = document.createElement("B");
  return boldElem.innerText = Foo()
}

Combining function calls and HTML tags in NEXT in JavaScript