Reactjs 将动态组件添加到其他组件中

Posted 2023-02-22

【中文标题】Reactjs 将动态组件添加到其他组件中

【英文标题】：Reactjs Add dynamic component into other component

【发布时间】：2017-12-02 18:22:47

【问题描述】：

我正在尝试使用 reactjs 开发一个 webapp，但我遇到了一个问题。经过1天多的研究，我不明白该怎么做。

我想使用一个组件，它是我页面的主要布局，添加其他组件以在其中显示。

在组件Base2中，子props包含另一个组件。

import React from 'react';
import PropTypes from 'prop-types';
import  Link, NavLink  from 'react-router-dom';

const Base2 = (child) => (

    <div>
        <div className="top-bar">
            <div className="top-bar-left">
                <NavLink to="/">React App</NavLink>
            </div>

            <div className="top-bar-right">
                <Link to="/login">Log in</Link>
            </div>

        </div>

        <child/> // HERE the dynamic component

    </div>
);

export default Base2;

调用它的函数是：

const TestBase = (props) => 
    return (<Base child=MyComponent/>)
;

此外，MyComponent 可以是一个类声明以下两种方法：

import React from 'react';
import LoginForm from '../components/LoginForm.jsx';

class MyComponent extends React.Component
    constructor(props) 
        super(props);
    ...
    
    render() 
        return (
            <LoginForm
                onSubmit=this.processForm
                onChange=this.changeUser
                errors=this.state.errors
                user=this.state.user
            />
        );
    



export default LoginPage;

第二种方法：

import React from 'react';
import  Card, CardTitle  from 'material-ui/Card';

const MyComponent = 
    render()  
        return (<Card className="container">
            <CardTitle title="React Application" subtitle="Home         page." />
        </Card>);
    
;

export default MyComponent ;

在我的测试中，只有第二种方法有效。第二种方法缺少“实例”（我猜是这样的）可能是问题所在？ 如何开发 Base2 组件来接受这两种组件声明？

提前感谢您的帮助

【参考方案1】：

首先像这样传递组件：

<Base child=<MyComponent/>/>

然后render props.child 在 Base2 组件中@，您编写 Base2 组件的方式，child（只是参数名称）将具有 props 的值，而不是您直接传入的组件 props .

这样写：

const Base2 = (props) => ( 
    <div>
        <div className="top-bar">
            <div className="top-bar-left">
                <NavLink to="/">React App</NavLink>
            </div>

            <div className="top-bar-right">
                <Link to="/login">Log in</Link>
            </div>
        </div>

        props.child   //here

    </div>
);

【讨论】：

感谢您的快速回复。通过这些修改，只有第二种方法有效。我真的很想知道为什么它在一种情况下有效，而不是在第二种情况下有效。你对这两种方法都有什么策略吗？两种方法是否返回相同的输出？我不这么认为，因为只有一种方法是正确的。所以我一个人看不懂。

实际上，您向我展示了正确的方法，因为多亏了您的回复，我两种方法都成功了。我用解决方案回答我的问题。

【参考方案2】：

在第二种方法中似乎是一个包含渲染方法的简单 json。要在似乎用 es5 编写的第二种方法中创建组件，您必须使用 react.createClass( render ... ) 在网上搜索你会发现很多 es5 的例子

【参考方案3】：

在@Mayank Shukla 的帮助下，我找到了最好的方法。

import React from 'react';
import PropTypes from 'prop-types';
import  Link, NavLink  from 'react-router-dom';

const Base2 = (props) => (

    <div>
        <div className="top-bar">
            <div className="top-bar-left">
                <NavLink to="/">React App</NavLink>
            </div>

            <div className="top-bar-right">
                <Link to="/login">Log in</Link>
            </div>

        </div>

        props.child

    </div>
);

export default Base2;

调用它的函数是：

const TestBase = (props) => 
    return (<Base2 child=<MyComponent/>/>)
;

第一种方法：

import React from 'react';
import LoginForm from '../components/LoginForm.jsx';

class MyComponent extends React.Component
    constructor(props) 
        super(props);
    ...
    
    render() 
        return (
            <LoginForm
                onSubmit=this.processForm
                onChange=this.changeUser
                errors=this.state.errors
                user=this.state.user
            />
        );
    



export default LoginPage;

第二种方法：

import React from 'react';
import  Card, CardTitle  from 'material-ui/Card';

const MyComponent = (props) =>

        return (<Card className="container">
            <CardTitle title="React Application" subtitle="Home         page." />
        </Card>);

;

export default MyComponent ;