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

类似的问题要么不相关,要么很复杂。我提到了this SO thread,但仍然没有得到我想要的输出。

类似的问题要么不相关,要么很复杂。我提到了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>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(450)
通过 C#弹出USB设备
上一篇
如何获取鼠标单击画布元素的坐标 (mouse click)
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(14条)