如何使用react js将组件相互嵌套？

Question

我有以下四个反应类别/功能。应用程序内部包含一个世界，其中包含地图和播放器。这是一款来自教程https://www.youtube.com/watch?v=QZcNGfcn-oo&t=1981s的游戏。没有错误，一切正常。唯一的问题是我无法让玩家（独角兽）进入世界/地图。当我查看Chrome中的react选项卡时，没有看到World组件，但是看到了Map和Player组件。

  class App extends Component {
    render() {
        return (
            <div>
            <World/>
            </div>
        );
     }
    }

    export default App;

    import react from 'react';
import Map from '../map';
import Player from '../player';

function World(props) {
    return (
        <div
            style={{
                position: 'relative',
                width: '800px',
                height: '400px',
                margin: '20px auto'
            }}
        >
            <Map />
            <Player />
        </div>
    );
}

export default World;

import React from 'react';

function Map(props) {
    return ( <
        div style = {
            {
                position: 'relative',
                top: '0px',
                left: '0px',
                width: '800px',
                height: '400px',
                backgroundColor: 'green',
                border: '4px solid white',
                margin: '20px auto'

            }
        }
        />
    );
}

    export default Map;

    import React from 'react';
    import { connect } from 'react-redux';
    import Unicorn from './Unicorn.png';

    function player(props) {

        return ( <
            div style = {
                {
                    position: 'absolute',
                    top: props.position[1],
                    left: props.position[0],
                    backgroundImage: `url(${Unicorn})`,
                    backgroundPosition: '0 0',
                    width: '32px',
                    height: '32px'
                }
            }
            />
        );
    }

    function mapStateToProps(state) {
        var x = 1;
        return {
            ...state.player
        };
    }

    export default connect(mapStateToProps)(player);