javascript - React.js 不起作用

Question

大家) 我正在使用 React.js 做一些待办事项列表。在我的待办事项列表中，一个人应该能够添加和删除一些项目。 但一开始，我在react.js 上做了一些项目。 不幸的是，这些项目不起作用。控制台告诉我有一个意外的标记，并显示单词 ReactDOM 中的大写字母 R。

这是我的代码:

"use strict";

    class List extends React.Component ({
        displayName: "List",

        function () {
            return React.createElement(
                "div",
                null,
                React.createElement(
                    "svg",
                    { style: "width:20px;height:20px", viewBox: "0 0 24 24" },
                    React.createElement("path", { fill: "#000000", d: "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" })
                ),
                React.createElement(
                    "p",
                    null,
                    this.props.item
                )
            );
        }
    })


ReactDOM.render(React.createElement(
    "div",
    null,
    React.createElement("List", { item: "Feed the dog" }),
    React.createElement("List", { item: "Build the house" }),
    React.createElement("List", { item: "Wash the car" }),
    React.createElement("List", { item: "Make some shopping" }),
    React.createElement("List", { item: "Build a list" })
    ), 
    document.getElementById("list"));

我很惊讶。我真的不知道这个词中的大R是一个错误。教程也同意我的观点。 还是我不对？我的错误在哪里？

Answer 1

看起来您的 React.createClass() 和 extends React.Component 有点混淆了。如果您尝试使用 React.createClass() ( which is no longer recommended )，它将类似于:

var List = React.createClass ({
  displayName: "List",

  function () {
    return React.createElement(
      "div",
      null,
      React.createElement(
          "svg",
          { style: "width:20px;height:20px", viewBox: "0 0 24 24" },
          React.createElement("path", { fill: "#000000", d: "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" })
      ),
      React.createElement(
          "p",
          null,
          this.props.item
      )
    );
  }
});


ReactDOM.render(React.createElement(
"div",
null,
React.createElement("List", { item: "Feed the dog" }),
React.createElement("List", { item: "Build the house" }),
React.createElement("List", { item: "Wash the car" }),
React.createElement("List", { item: "Make some shopping" }),
React.createElement("List", { item: "Build a list" })
), 
document.getElementById("list"));

强烈建议您使用 Javascript 类来与 JSX 一起创建 React 类，这样您就可以获得如下内容:

class List extends React.Component {

  render() {
    return (
      <div>
        <svg
          style={{width: '20px', height: '20px'}}
          viewBox="0 0 24 24">
            <path
              fill='#000000'
              d='M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' />
        </svg>
        <p>{this.props.item}</p>
      </div>
    )};
}


let element = (
  <div>
    <List item="Feed the dog" />
    <List item="Build the house" />
    <List item="Wash the car" />
    <List item="Make some shopping" />
    <List item="Build a list" />
  </div>
);

ReactDOM.render(element, document.getElementById('list'));

工作示例:https://codepen.io/anon/pen/xdrdwE