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

发布于 2025-01-10 10:47:42 字数 700 浏览 1 评论 0原文

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

原文

Questions similar to this were either irrelevant or complicated. I've referred to this SO thread but still not getting my desired output.

Desired output:

Hi there, Anna! 
Hi there, Je!
Hi there, Ram!

I've tried playing around with .map() but only resulted in no output.

Here is the code I've written:

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')
);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苦妄 2025-01-17 10:47:42

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

Make sure your separate components' JSX are wrapped within a containing element.

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>

回复收藏 0 原文

~没有更多了~