在JavaScript中的NEXT中組合函數調用和HTML標記

Question

假設我有一個名為Foo()的函數，該函數輸出“ Hello world！”，我想制作一個名為Bar()的函數，該函數接收Foo()的輸出並將其加粗。 所需的輸出：

你好，世界！

我嘗試過的事情：

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() }