如何从渲染功能中分离JSX部件

Question

All:

I am pretty new to React.js and just use a little bit AngularJS, there is one question about React.js:

In AngularJS, the HTML part usually is separated from JS code as template, I like that way which make the code clean, I wonder if there is a similar way I can do this in React, or just use a function to apply this.state/this.props to the HTML part?

Thanks

Answer 1

The render function is just a synchronous function. As long as the template has already been loaded by something you can absolutely do this.

//Some module that has loaded the HTML
import jsxStore from 'jsxStore';

class SillyComponent extends React.Component {
    render() {
        return jsxStore.getSillyComponent(this.props, this.state);
    }
}

The challenge here will be ensuring that the HTML is loaded by the time this call is made, since render doesn't accept asynchronous results. The HTML will have to be loaded before the component tries to do anything.

It should be noted that you are fighting React by doing this. The React idea of a component is a self-contained bundle of code and presentation. The goal is to keep the component in a single file, so that you can see the whole thing at once. This is different from frameworks like Angular intentionally . If you don't like this, React is not going to be a good fit for you.