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

Question

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

到目前为止，我想了解如何从头开始创建一个类并将其呈现在页面上。我在网上搜索了一下，发现了一些像 here 这样的例子，但它们不适合我的情况，因为在在这种情况下，用户正在使用我没有使用的 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();

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

如您所见，我已经创建了类，尝试初始化它，然后使用渲染方法但没有显示。我想我必须以某种方式在这里使用此方法document.getElementById('react-container') 来指向我想要渲染的位置，但我我不确定如何将它集成到我的构建中。

Answer 1

在 React 中，你永远不应该在组件上调用 render 方法。 React 为您处理渲染，这也是为什么首先使用 React 的重要原因。

您需要使用ReactDOM.render 将您的应用挂载到 DOM 中，然后 React 将从那里管理组件和子组件的渲染。

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

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>