如何不使用jsx格式呈现React组件? [英] How I can render react components without jsx format?

问题描述

我尝试制作智能"弹出窗口组件，该组件可以在其内部打开某些组件，但是我的实现不好，因为它不起作用.

I try to make my "smart" popup component, which can open inside itself some components, but my realization isn't good, because it doesn't work.

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

I use redux approach for creating popup and action of opening my popup is able to get name of any component for rendering before popup will be open;

但是我有一个问题，在获取参数后，在我们的例子中是 nameOfComponent ，我需要选择并渲染名称为 nameOfComponent 的组件.

But I've some problem, after getting parameter, in our case it's nameOfComponent, I need to choose and render component with name nameOfComponent.

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

And my question now, how do It can render component from array?

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

推荐答案

我在此处添加了工作示例 JSfiddle ReactJS

I added working example here JSfiddle ReactJS

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

You dont have to use JSX. If you do, right way to do this is to use factory. You can also render regular HTML in the render method, as well as to use vanilla javascript in your code using curly braces.

我也建议您映射和迭代数组中的所有项，然后在render方法中逐一渲染它们.

Also to get I would recommend mapping and iterating through all your items in array and render them one by one in the render method

请参见下面的示例:

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'));

这篇关于如何不使用jsx格式呈现React组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！