Question

我的应用包含2个组成部分：位置和用户。

在加载页面时呈现位置。一些地点有用户。呈现位置之后，将通过ajax调用来加载这些用户。

我想知道当该用户分配到某个位置时，如何（有条件地）将该用户呈现在某个位置。

Access-Control-Allow-Origin

Answer 1

您可以使用以下示例动态呈现Component：

方法1：

以下是位置组件：

import React from "react";
import {User} from "./User";

export class Location extends React.Component {

    render() {
        return (
            <div style={{margin:20, padding:20, color: '#FFFFFF', background: '#368BC1'}}>
                This is Location Component {this.props.value}
                {
                    this.props.user? <User/> : " No User Component"
                }

            </div>
        );
    }
}

以下是用户组件：

import React from "react";

export class User extends React.Component {

    render() {
        return (
            <div style={{background: '#A0CFEC', padding: 20, color:'#000000'}}>
                This is User Component
            </div>
        );
    }
}

应用组件：

import React from "react";
import ReactDOM from 'react-dom'
import {Location} from "./parent-child/Location";

class App extends React.Component {
    render() {
        return (
            <div>
                <Location user={true} value={1}/>
                <Location user={false} value={2}/>
                <Location user={true} value={3}/>
            </div>
        );
    }
}


ReactDOM.render(<App/>, document.getElementById("root"));

export default App;

方法2：

您可以使用以下代码替换位置组件。在这里，我使用React.createElement方法动态创建组件。

import React from "react";
import {User} from "./User";

export class Location extends React.Component {

    render() {
        return (
            <div style={{margin:20, padding:20, color: '#FFFFFF', background: '#368BC1'}}>
                This is Location Component {this.props.value}
                {
                    this.props.user? React.createElement(User, {propValue: 'Hello World'}, null) : " No User Component"
                }
            </div>
        );
    }
}

动态渲染组件中的组件

1 个答案: