javascript - How to make react know my separately loaded HTML?

Question

I want to separate JavaScript and HTML in react. I'm not a big fan of their philosophy of mixing them together.

So, basically I created my component .js files. For example teachersList.js and this is my code:

class Teacher extends React.Component {
    constructor() {
        super();
        this.state = { teachersCount: 20, html: <div>loading</div> }
    }

    componentDidMount() {
        var that = this;
        setTimeout(function () {
            that.setState({ html: <div> dynamic HTML is loaded: {that.state.teachersCount}</div> })
        }, 2000);
    }

    render() {
        return (
            <div >
                <div dangerouslySetInnerHTML={{ __html: this.state.html }}></div>
            </div>
        )
    }
}

And it works just fine. However, when I change the componentDidMount function to load HTML from server, it breaks:

componentDidMount() {
    var that = this;
    $.get("/teacher/list.html", function (data) {
        that.setState({ html: data })
    }) 
}

What should I do?

question from:https://stackoverflow.com/questions/65842810/how-to-make-react-know-my-separately-loaded-html

Answer 1

Your approach to use real HTML together with React just doesn't work, conceptionally.
(I think it is pretty save to say that here, even though there are some ways to inject HTML into React)

It is not possible (conceptionally) to use something like HTML-templates with React. The only solution would be to not use React.

You should decide if you want to write HTML or React, not both.

I think it is not precisely true to say that "React mixes HTML and Javascript", it would be better to understand React as an abstraction of HTML and JS. There is no real HTML in React, React is kind of a separate language, you just write React instead of HTML. The code that looks like HTML is not real HTML, it is JSX, which is Javascript hidden behind a special syntax that looks like HTML, for convenience.

So, if you decide to use React, then don't write HTML at all (but write JSX). If you want HTML, then don't use React.

separating logic and view

You say you don't like mixing HTML and Javascript, but there is no HTML, so what do we actually want to not-mix ? I think it makes sense to separate page-structure and app-structure. E.g. you may go for separating into different components / files:

• HTML-Tag-JSX (like <div className="...">...), which will be shown in the resulting HTML code pretty much the same as you write it in JSX, and
• React components (like <MainContent store={ store } />), which have pretty much nothing to do with HTML code at all.