我是React的新手，我正在尝试结合状态/道具和纯Javascript来导航JSX语法。

我正在将道具从父组件（App）传递到子组件（Character）。道具之一是一组数字，当子组件被渲染时，我试图将其打印到段落内的页面上。我想出了如何打印所有其他道具（字符串或数字）的方法，但找不到针对seasons数组的解决方案。我可以使用forEach循环将数组的所有元素打印到控制台，但是我不知道如何将结果集成到JSX中。我想让子组件的最后一段阅读

Seasons：1、2、3

编辑：我希望每个印刷季节都是一个单独的元素（例如，一个链接），而不是将数组转换成一个读取“ 1、2、3”的字符串（例如，使用join（，）时）

这是我对App组件的代码：

import React,{ Component } from 'react';
import './App.css';
import Characters from './Characters'

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      characters: [
        {
          screenName: "Uhtred Uhtredson",description: "Uthred's younger son,originally named Osbert.",realName: "Alexander Dreymon",seasons: [1,2,3],id: 1
        },{
          screenName: "Brida",description: "Former lover of Uhtred. Ally to Ragnall Ivarsson. Lady of Dunholme and widow to Ragnar.",realName: "Emily Cox",id: 2
        },{
          screenName: "King Edward",description: "King Alfred's son and King of Wessex.",realName: "Timothy Innes",id: 3
        }
      ]

    }
  }
  render() {

    return (
      <div classname="App" >
        <Characters theCharacters={this.state.characters} />
      </div>
    );
  }
}


export default App;

这是Character组件的代码：

import React from 'react';

const Characters = (props) => {

    // we use destructuring by storing the array of objects into the characters const
    const { theCharacters } = props;

    const charactersList = theCharacters.map(character => {
        return (
            <div classname="character" key={character.id}>
                <p>On screen name: {character.screenName}</p>
                <p>Short description: {character.description}</p>
                <p>Real name: {character.realName}</p>
                <p>Apparitions: {

                    character.seasons.forEach(season => {
                         return season; //this here doesn't do anything
                        //console.log(season);
                    })}</p>
            </div>
        )
    })

        return (
          <div classname="character_list">
            {charactersList}
         </div>
              )
    }

export default Characters;

谢谢！