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

Question

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

我使用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>
    }
}

Answer 1

我在这里添加了工作示例JSfiddle ReactJS

您不必使用 JSX。如果你这样做，正确的方法是使用工厂。您还可以在 render 方法中渲染常规 HTML，以及使用大括号在代码中使用普通 javascript。

另外，为了获得，我建议映射和迭代数组中的所有项目，并在渲染方法中一一渲染它们

请参见下面的示例：

var Login = React.createClass({
  render: function() {
    return <div>{this.props.name}, logged in</div>;
  }
});

// React with JSX
ReactDOM.render(<Login name="John" />,
  document.getElementById('containerJSX'));

// React without JSX
var Login = React.createFactory(Login);
ReactDOM.render(Login({ name: 'Tim' }),
  document.getElementById('containerNoJSX'));

Answer 2

正如评论者所建议的，您可能希望this.body在构造函数中或在渲染方法本身中指定。

但是，如果我正确理解你的意图，你可以直接使用this.props.children。例如

<Popup><MyInnerComponent></Popup>

并在 Popuprender方法中

render() {
    <div>
        {this.props.children}
    </div>
}