Javascript 如何在动态呈现中添加html标记并仍然加载值？

我有一个接受数字“n”的组件，我试图动态呈现一个项目n次，但我需要在这个呈现中放置一个HTML标记。如何让它以其效果而不是字符串的形式呈现标记

例如：

//variables
props.multiple = a number (for example 2)
props.base1 = a number (lets say 5)
props.exp1 = also a number (lets say 3)

const Multiple = (props) => {
    let result = "";
    for(let i = 0; i < (props.multiple - 1); i++){
        console.log("i: "+i);
        result += `${props.base1}<sup>${props.exp1}</sup> + `;
    }
    console.log("result: "+result);
    return <span>{result}</span>;
}

//变量
props.multiple=一个数字（例如2）
props.base1=一个数字（假设为5）
props.exp1=也是一个数字（假设为3）
常量倍数=（道具）=>{
让结果=”；
for（设i=0；i<（props.multiple-1）；i++）{
控制台日志（“i:+i”）；
结果+=`${props.base1}${props.exp1}+`；
}
console.log（“结果：+result”）；
返回{result}；
}

我想让它呈现如下：

<span>
   {props.base1}<sup>{props.exp1}</sup> +
   {props.base1}<sup>{props.exp1}</sup> +
   {props.base1}<sup>{props.exp1}</sup> +
   ... however many times n is equal to
</span>

{props.base1}{props.exp1}+
{props.base1}{props.exp1}+
{props.base1}{props.exp1}+
... 然而，n等于

在网页上看起来像这样：

5^3+5^3+5^3+。。。n次

---

但是，现在我的html标记要么打印为字符串，要么呈现为

[object object

而不是实际值。我该怎么做？

这是正确的，因为您将所有字符串附加到

结果

变量，因此

props.base1

和

props.exp1

也被强制为字符串

您可能想做的是将JSX元素附加到该

results

变量中，然后在DOM上呈现它，您可以按如下方式执行：

let result = [];
for(let i = 0; i < (props.multiple - 1); i++){
    console.log("i: "+i);
    result.push(<>{props.base1}<sup>{props.exp1}</sup>+</>);
}

let result=[]；
for（设i=0；i<（props.multiple-1）；i++）{
控制台日志（“i:+i”）；
push（{props.base1}{props.exp1}+；
}

---

通过这种方式，您所做的是用所有JSX元素填充

结果
数组，因此所有HTML标记都将按预期呈现。
和
引用
React.Fragment
（）因为您不想将另一个JSX元素附加到每个子元素，例如
div
，所以您的示例的问题是您正在形成一个字符串，而您应该形成React元素。因此，您需要构建一个元素数组，而不是连接到字符串：


constmyfunction=（{multiple，base1，exp1}）=>{
const format=（）=>{base1}{exp1}+//或，但此处不支持
返回(
{{{.times（倍数，格式）}
);
};
const domContainer=document.querySelector（'#root'）；
ReactDOM.render（，domContainer）；

另一方面，我正在父组件中呈现此组件，但由于某些原因，所有的多个console.log语句都在无限打印，您知道这是什么原因吗？根据您的应用程序，它可能会重新呈现，因此每次React重新呈现父组件时，子组件都会重新呈现（因此重新执行）因此它将“无限地”console.log（但实际上不应该是无限的）