React：使用 ES6Class 创建一个组件并在没有 JSX 的情况下渲染它

Question

i have just started to learn React and i am trying to render components which i create as from classes. I like this way very much since it is similar to Java the language that i started with.

So far i want to understand how i can create a class from scratch and just render it on the page.I have searched around the web a bit and found some examples like here but they did not fit my situation because in that case, the user is using redux which i am not using. I also found several examples of rendering but they are not explicitly using classes.Could someone please show me how i can succesfully render the code to react-container i have here and explain it to me? Your help will be greatly appreciated !

class IngredientsList extends React.Component {

            renderListItem(ingredient, i) {
                return React.createElement("li", { key: i }, ingredient)
            }

            render() {
                return React.createElement("ul", { className: "ingredients" }, this.props.items.map(this.renderListItem))
            }

        }

        const myIngredients = new IngredientList();

        const items = ["1 lb Salmon", "1 cup pine nuts", "2 cups butter lettuce", "1 yellow squash", "1/2 cup Olive oil", "3 gloves of garlic"];

        const myList = myIngredients.renderListItem(items, 1);
        myIngredients.render();

<div id="react-container"></div>

so as you can see i have created the class, tried to initialize it and then use the render method but nothing displays.I suppose i have to somehow use this method here document.getElementById('react-container') to point where i want to render but i am not sure how to integrate that in my build.

Answer 1

In React, you never should call the render method on a component. React handles the rendering for you, which is a big part of why to use React in the first place.

You need to use ReactDOM.render to mount your app into the DOM, and then React will manage the rendering of components and sub-components from there.

ReactDOM.render accepts two arguments. The first is the component, and the second is the actual DOM element where you want your app to be rendered on the page.

 class IngredientsList extends React.Component { renderListItem(ingredient, i) { return React.createElement("li", { key: i }, ingredient) } render() { return React.createElement("ul", { className: "ingredients" }, this.props.items.map(this.renderListItem)) } } const items = ["1 lb Salmon", "1 cup pine nuts", "2 cups butter lettuce", "1 yellow squash", "1/2 cup Olive oil", "3 gloves of garlic"]; ReactDOM.render( React.createElement(IngredientsList, {items: items}), document.getElementById('react-container') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="react-container"></div>