React：道具没有传递给孩子

Question

所以我有这个父对象，它克隆并向子对象注入了 Login 属性：

import React, { Component } from 'react';
import { Container } from 'reactstrap';
import { NavMenu } from '../navigations/NavMenu';
import { Login } from './account/Login';

export class Layout extends Component {
    static displayName = Layout.name;

    render() {
        const loginForm = new Login();
        const childrenWithProps = React.Children.map(this.props.children, child => {
            if (React.isValidElement(child)) {
                return React.cloneElement(child, { loginForm: loginForm });
            }
            return child;
        });

        return (
            <div>
                {loginForm.render()}
                <NavMenu />
                <Container>
                    {childrenWithProps}
                </Container>
            </div>
        );
    }
}

这是其中一个孩子：

import React, { Component } from 'react';
import { http } from '../../helpers/Http';

export class FetchData extends Component {
    static displayName = FetchData.name;

    constructor(props) {
        super(props);
        this.state = { forecasts: [], loading: true };
        let x = this.props.loginForm; <-- THIS IS UNDEFINED
    }

    .......
}

this.props.loginForm 未定义。如何正确注入 props？

---

编辑

这是 Login 组件：

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

export class Login extends Component {
    constructor(props) {
        super(props);
        this.state = { show: false };
        this.login = this.login.bind(this);
        this.showLogin = this.showLogin.bind(this);
    }

    showLogin() {
        this.setState({
            show: true
        });
    }

    login() {

    }

    render() {
        return (
            <form className={this.state.show ? "login-form " : "login-form hide"} onSubmit={this.login()}>
                <h1>Login</h1>

                <div className="form-group">
                    <input required type="text" placeholder="Email" />
                    <input required type="password" placeholder="Password" />
                </div>

                <button type="submit" className="btn btn-primary">Login</button>
            </form>
        );
    }
}

我想从 showLogin() 呼叫 FetchData。如果用户在获取数据时未授权，我想显示登录模式。