Javascript React：使用ES6Class创建组件并在不使用JSX的情况下呈现它

我刚刚开始学习React，我正在尝试渲染我从类创建的组件。我非常喜欢这种方式，因为它类似于我开始使用的Java语言

到目前为止，我想了解如何从头开始创建一个类并在页面上呈现它。我在网络上搜索了一些例子，如，但它们不适合我的情况，因为在这种情况下，用户使用的是我没有使用的redux。我还发现了几个渲染示例，但它们没有显式使用类。有人能告诉我如何成功地将代码渲染到我这里的

react container

，并向我解释一下吗？非常感谢您的帮助

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

---

如您所见，我创建了该类，尝试对其进行初始化，然后使用render方法，但没有显示任何内容。我想我必须以某种方式在这里使用此方法

document.getElementById（'react-container'）

，以达到我要渲染的位置，但我不确定如何将其集成到我的构建中。

在react中，永远不应该对组件调用

render

方法。React为您处理渲染，这是为什么首先使用React的一个重要部分

您需要使用将应用程序装载到DOM中，然后React将从此处管理组件和子组件的呈现

ReactDOM.render

接受两个参数。第一个是组件，第二个是实际的DOM元素，您希望在页面上呈现应用程序

class IngCreditsList扩展了React.Component{
Renderlistiem（成分，i）{
返回React.createElement（“li”，{key:i}，成分）
}
render（）{
返回React.createElement（“ul”，{className:“配料”}，this.props.items.map（this.renderlitem））
}
}
const items=[“1磅三文鱼”，“1杯松仁”，“2杯奶油生菜”，“1个黄南瓜”，“1/2杯橄榄油”，“3只大蒜手套]；
ReactDOM.render(
React.createElement（IngredientsList，{items:items}），
document.getElementById（'react-container'））
);
在React中，您永远不应该对组件调用
render
方法。React为您处理渲染，这是为什么首先使用React的一个重要部分

您需要使用将应用程序装载到DOM中，然后React将从此处管理组件和子组件的呈现

ReactDOM.render
接受两个参数。第一个是组件，第二个是实际的DOM元素，您希望在页面上呈现应用程序


class IngCreditsList扩展了React.Component{
Renderlistiem（成分，i）{
返回React.createElement（“li”，{key:i}，成分）
}
render（）{
返回React.createElement（“ul”，{className:“配料”}，this.props.items.map（this.renderlitem））
}
}
const items=[“1磅三文鱼”，“1杯松仁”，“2杯奶油生菜”，“1个黄南瓜”，“1/2杯橄榄油”，“3只大蒜手套]；
ReactDOM.render(
React.createElement（IngredientsList，{items:items}），
document.getElementById（'react-container'））
);

非常感谢，效果很好。你能解释一下吗。我只需要传递类名吗？我的意思是，我不需要实例化任何东西，其他的都由react处理？我还需要在我想要渲染的类组件中有一个渲染方法吗？react会自动调用此方法吗？@helloApp注意，它不是类名（不是字符串），而是对类的引用（不是类的实例）。因此，React将实例化该类，并对其调用
render
方法。是的，您必须将该方法命名为“render”，以便React知道如何调用它。非常感谢！非常感谢，效果很好。你能解释一下吗。我只需要传递类名吗？我的意思是，我不需要实例化任何东西，其他的都由react处理？我还需要在我想要渲染的类组件中有一个渲染方法吗？react会自动调用此方法吗？@helloApp注意，它不是类名（不是字符串），而是对类的引用（不是类的实例）。因此，React将实例化该类，并对其调用
render
方法。是的，您必须将该方法命名为“render”，以便React知道如何调用它。非常感谢！
<div id="react-container"></div>