循环遍历字符串数组并将其呈现为 React 组件中的 Prop

Question

类似的问题要么无关紧要，要么复杂。我已经提到 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')
);

Answer 1

确保单独组件的 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>

循环遍历字符串数组并将其呈现为 React 组件中的 Prop

Loop through an array of strings and render it as a Prop in a Component in React

javascript

reactjs

react-props

react-component