我有一組span需要在另一個靜態文本中呈現的元素。
示例最終結果：按正確順序放置3、1和2here the bold numbers are the spans
這是我的代碼
generateQuestion() {
const newState = { ...this.state };
let numbers= newState.numbers.map((item, index) => <span style={{color: "red"}}>{item.number}</span>)
let textQuestion = `Place the numbers ${numbers[0]}, ${numbers[1]} and ${numbers[2]} in the right order.`;
return (
<div>{textQuestion}</div>
);
}
問題是我在渲染時得到這個 Place the numbers [object Object], [object Object] and [object Object] in the right order
當我numbers直接渲染陣列時，我得到了跨度
return (
<div>{numbers}</div>
);
我該如何解決這個問題？
uj5u.com熱心網友回復：
您正在嘗試在字串內呈現物件，正確的方法是使用 jsx 而不是字串：
generateQuestion() {
const newState = { ...this.state };
let numbers= newState.numbers.map((item, index) => <span style={{color: "red"}}>{item.number}</span>)
let textQuestion = <div>Place the numbers {numbers[0]}, {numbers[1]} and {numbers[2]} in the right order.<div>;
return (
{textQuestion}
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/363932.html
標籤：javascript 反应
上一篇：使用字串將多個css值保存到一個javascript變數中
下一篇：使用反應鉤子選擇多個專案？