小编Bor*_*men的帖子

如何在没有jsx格式的情况下渲染反应组件?

我尝试制作我的"智能"弹出组件,它可以在其自身内部打开一些组件,但我的实现并不好,因为它不起作用.

我使用redux方法创建弹出窗口,打开弹出窗口的操作能够在弹出窗口打开之前获取任何组件的名称进行渲染;

但是我有一些问题,在获取参数之后,在我们的例子中它是nameOfComponent,我需要选择并使用名称nameOfComponent渲染组件.

现在我的问题是,它如何从数组中呈现组件?

// He's my components
import Login from '../Login/login.js';
import Logout from '../Logout/logout.js';


const popupContent = {
    Login : Login,
    logout: Logout
};

// My component 
class Popup extends Component {

    componentDidUpdate () {
        // for example
        const nameOfComponent = "Login";

        this.body = this.setBodyPopup(nameOfComponent);

        return true;
    }

    setBodyPopup(property){
         return popupContent[property];
     }


    render() {
        // I want to render some element from popupContent here
        <div>
            // <this.body /> // it's jsx format
            {this.body}
        </div> …
Run Code Online (Sandbox Code Playgroud)

javascript jsx reactjs redux

7
推荐指数
2
解决办法
2388
查看次数

标签 统计

javascript ×1

jsx ×1

reactjs ×1

redux ×1