與此類似的問題要么無關緊要，要么很復雜。我已經提到了這個 SO 執行緒，但仍然沒有得到我想要的輸出。
期望的輸出：
Hi there, Anna!
Hi there, Je!
Hi there, Ram!
我試過玩，.map()但只導致沒有輸出。
這是我寫的代碼：
import React from 'react';
import ReactDOM from 'react-dom';
class Greeting extends React.Component {
render() {
return <h1>Hi there, {this.props.firstName}!</h1>;
}
}
const names = ["Anna", "Je", "Ram"];
const greet_em = names.map(name => (<Greeting firstName={name}/>));
ReactDOM.render(
{greet_em},
document.getElementById('app')
);
uj5u.com熱心網友回復：
確保您的單獨組件的 JSX 包裝在包含元素中。
const { Component } = React;
class Greeting extends React.Component {
render() {
return <h1>Hi there, {this.props.firstName}!</h1>;
}
}
const names = ["Anna", "Je", "Ram"];
const greet_em = names.map(name => (<Greeting firstName={name}/>));
ReactDOM.render(
<div>{greet_em}</div>,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/433492.html
標籤：javascript 反应 反应道具 反应组件