javascript-Reactjs将动态组件添加到其他组件

2019-11-11 07:38:13 阅读：188 来源： 互联网

标签：reactjs components render javascript

我正在尝试使用reactjs开发一个webapp,但我遇到了问题.经过1天以上的研究,我不知道该怎么做.

我想使用一个组件,该组件是页面的主要布局,并添加了其他要显示的组件.

在组件Base2中,子道具包含另一个组件.

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可以是一个声明以下2种方法的类：

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组件以采用这两种类型的组件声明？

在此先感谢您的帮助

解决方法:

首先通过这样的组件：

<Base child={<MyComponent/>}/>

然后通过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>
);

标签：reactjs,components,render,javascript
来源： https://codeday.me/bug/20191111/2018335.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-Reactjs将动态组件添加到其他组件