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类代替创建React类和JSX，这样你就可以得到类似的内容：

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

React.js不起作用

1 个答案: