在 JavaScript 中结合 NEXT 中的函数调用和 HTML 标签答案

【问题标题】：Combining function calls and HTML tags in NEXT in JavaScript在 JavaScript 中结合 NEXT 中的函数调用和 HTML 标签
【发布时间】：2019-06-04 09:21:28
【问题描述】：

假设我有一个名为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! 作为输出？

【问题讨论】：

标签： javascript next.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我想出了怎么做，尽管对于来自 C# 和 C++ 的人来说并不明显。

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：