Javascript 如何在没有jsx格式的情况下呈现react组件？

我试着制作我的“智能”弹出组件，它可以在内部打开一些组件，但我的实现并不好，因为它不工作

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

但我有一些问题，在获取参数后，在我们的例子中，它是组件的名称，我需要选择并呈现名为组件的名称的组件

现在我的问题是，它如何从数组中渲染组件

// 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>
    }
}

//他是我的组件
从“../Login/Login.js”导入登录名；
从“../Logout/Logout.js”导入注销；
常量popupContent={
登录：登录，
注销：注销
};
//我的组件
类弹出扩展组件{
组件更新（）{
//比如说
const nameOfComponent=“Login”；
this.body=this.setbodypoup（组件名称）；
返回true；
}
setBodyPopup（财产）{
返回popupContent[属性]；
}
render（）{
//我想在这里呈现popupContent中的一些元素
////它是jsx格式
{this.body}
}
}

正如评论员所建议的，您可能希望在构造函数中或在呈现方法本身中指定此.body

但是，如果我正确理解您的意图，您可以使用

this.props.children

。 例如

---

React实际上允许您使用带有JSX语法的变量来实例化组件。实际上，您应该能够调用

，并让它工作但是您的不会，因为在使用

componentdiddupdate

方法之前，您没有定义

此.body

，这意味着在第一次渲染时它将被取消定义，并破坏所有内容。我建议对此使用本地组件状态，而不是

this.body

，并确保从一开始就定义它

至少，将构造函数中的

this.body

实例化为某个值：

constructor(props) {
    super(props);
    this.body = 'Login';
}

您可以使用

渲染组件，只要

此.body

具有实际值。也许你只需要：

render() {
    return <div>
        {this.body ? <this.body /> : null}
    </div>
}

render（）{
返回
{this.body？：null}
}

---

但是，在您给出的示例中，您可以将

组件didmount

的内容放在

构造函数中，因为构造函数是在第一次渲染过程之前调用的。
我在这里添加了工作示例

您不必使用JSX。若你们这样做，正确的方法是使用工厂。您还可以在render方法中呈现常规HTML，也可以使用花括号在代码中使用普通javascript

此外，为了获得更好的效果，我建议映射和迭代数组中的所有项，并在render方法中逐个渲染它们

见下例：
var Login=React.createClass({
render:function（）{
返回{this.props.name}，已登录；
}
});
//与JSX反应
ReactDOM.render（，
document.getElementById（'containerJSX'）；
//不使用JSX进行反应
var Login=React.createFactory（登录）；
render（登录名（{name:'Tim'}），
document.getElementById（'containerNoJSX'）我想你看到的是这样的东西


我不知道您为什么要使用
componentDidUpdate
，我认为您可以在这种情况下使用构造函数-因为我的弹出窗口可以打开另一个通过道具传递的内容。我有一个spa的弹出窗口。在这种情况下，
这个.body
将是未定义的-所以这是主要的问题，因为如果
这个.body
是引用组件的，它会工作得很好（
）@Alexander这是真的，我忽略了那个时刻。
constructor(props) {
    super(props);
    this.body = 'Login';
}

render() {
    return <div>
        {this.body ? <this.body /> : null}
    </div>
}

<div dangerouslySetInnerHTML={this.body} />