Reactjs 将组件传递到组件中

我有3项：

登录

，

注册

，和

帐户表单

。

AccountForm

应该能够接收

登录

或

注册

组件作为道具。我对这一点还是有点陌生，所以在尝试了一些不同的事情之后，在执行上遇到了麻烦

AccountForm

：

class AccountForm extends Component {
    render() {
        return (
            <Container>
                <Row>
                    <Col md="6" className="mx-auto d-flex align-items-center">
                        <Container className="form-container">
                            <Row>
                                <Image src={"/static/frontend/images/digibrain-bubble-bg-black-thin.svg"}
                                       alt="DigiBrain logo"
                                       fluid
                                />
                            </Row>
                            <Row className="mt-4">
                                <Col>
                                    <Container>
                                        { this.props.form } // this is where I would like to pass the forms into.
                                    </Container>
                                </Col>
                            </Row>
                        </Container>
                    </Col>
                </Row>
            </Container>
        );
    }
}

class AccountForm extends Component {

    render() {
        return (
            <Container>
                <Row>
                    <Col md="6" className="mx-auto d-flex align-items-center">
                        <Container className="form-container">
                            <Row>
                                <Image src={"/static/frontend/images/digibrain-bubble-bg-black-thin.svg"}
                                       alt="DigiBrain logo"
                                       fluid
                                />
                            </Row>
                            <Row className="mt-4">
                                <Col>
                                    <Container>
                                        { this.props.children }
                                    </Container>
                                </Col>
                            </Row>
                        </Container>
                    </Col>
                </Row>
            </Container>
        );
    }
}

。。而

Register

是与

Login

类似的表单，因此无需发布它

我的路线是这样的：

<Route exact path='/register/' component={Register}/>
<Route exact path='/login/' component={Login}/>

---

如何将

AccountForm

包装在

Login

和

Register

组件周围？

您可以使用

箭头功能创建动态组件，并通过使用
渲染
属性发送所需的任何参数

<Route exact path='/register/' render={() => <AccountForm form={Register} />}/>
<Route exact path='/login/' render={() => <AccountForm form={Login} />}/>

我们可以创建HOC-AccountForm并将其应用于“登录”和“注册”组件

对于现成的参考-
当其他答案有帮助时，我发现了一个更简单的解决方案，它允许我将代码执行保持在较低的级别。我小时候必须通过表格，就像我最初尝试的那样：

AccountForm
：

class AccountForm extends Component {
    render() {
        return (
            <Container>
                <Row>
                    <Col md="6" className="mx-auto d-flex align-items-center">
                        <Container className="form-container">
                            <Row>
                                <Image src={"/static/frontend/images/digibrain-bubble-bg-black-thin.svg"}
                                       alt="DigiBrain logo"
                                       fluid
                                />
                            </Row>
                            <Row className="mt-4">
                                <Col>
                                    <Container>
                                        { this.props.form } // this is where I would like to pass the forms into.
                                    </Container>
                                </Col>
                            </Row>
                        </Container>
                    </Col>
                </Row>
            </Container>
        );
    }
}

class AccountForm extends Component {

    render() {
        return (
            <Container>
                <Row>
                    <Col md="6" className="mx-auto d-flex align-items-center">
                        <Container className="form-container">
                            <Row>
                                <Image src={"/static/frontend/images/digibrain-bubble-bg-black-thin.svg"}
                                       alt="DigiBrain logo"
                                       fluid
                                />
                            </Row>
                            <Row className="mt-4">
                                <Col>
                                    <Container>
                                        { this.props.children }
                                    </Container>
                                </Col>
                            </Row>
                        </Container>
                    </Col>
                </Row>
            </Container>
        );
    }
}

这允许我在使
帐户表单可重用的同时保持
路由
不变：

<Route exact path='/login/' component={Login}/>


Hmm。。这感觉就像我将代码拉向顶层，这感觉不对；虽然我很容易错。是否有其他方法将其全部保存在较低级别的模块中？此外，我还得到了这个错误
Uncaught error:对象作为React子对象无效（找到：具有键{$$typeof，type，compare，WrappedComponent}的对象）。如果要呈现子对象集合，请使用数组。
@DavidAlford这实际上是我的错误。这次您需要使用
渲染
而不是
组件
。在这种情况下，它与组件基本相同，但允许内联渲染。我编辑了我的答案来修正它。我不认为这是不对的，因为
渲染
基本上就是为这种场景制作的。你可以在这里读到更多关于它的信息，我仍然会遇到同样的错误，但我并不太担心这个错误，只是为了学习。。您可以这样做，而不是在
@DavidAlford中处理渲染。只需执行
，在AccountForm的渲染方法中，您就可以使用
const{children}=this.props
抓取
子对象
，并将子对象渲染到您想要的任何位置。我非常喜欢这一想法，并且已经尝试过，但在执行过程中遇到了问题。你介意给出一个代码片段吗？准备了一个基于虚拟组件的stackblitz-