类似的问题要么不相关，要么很复杂。我提到了this SO thread，但仍然没有得到我想要的输出。
所需输出:
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')
);
0
确保单独组件的 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>本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（28条）