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

Question

我正在尝试使用 reactjs 开发一个网络应用程序，但我遇到了问题。研究了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 可以是一个 class 声明以下 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 ;

在我的测试中，只有第二种方法有效。第二种方法缺少 "instance"（我猜是这样的）可能是问题所在？如何开发 Base2 组件来采用这两种类型的组件声明？

在此先感谢您的帮助

Answer 1

首先像这样传递组件：

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

然后 render 它在 Base2 组件内 props.child，你写 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>
);

Answer 2

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

Answer 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 ;

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

Reactjs Add dynamic component into other component

javascript

components

render

reactjs