React.js不起作用

Question

everyone) I am doing some todo list with React.js. In my todo list a person should be able to add and remove some items. But at first, I did some items on react.js. Unfortunately, these item doesn't work. Console tells me that there is an unexpected token and shows me the uppercase letter R in the word ReactDOM.

Here is my code:

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

I was so surprised. I really didn;t know that big R in this word is a mistake. And tutorials are agree with me. Or I am not right? Where is my mistake?

Answer 1

It looks like you have React.createClass() and extends React.Component a bit mixed up. If you're trying to use React.createClass() ( which is no longer recommended ), it would be something like:

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

It is highly recommended that you use Javascript classes instead for creating React classes along with JSX, so then you can get something like:

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

Working example: https://codepen.io/anon/pen/xdrdwE