Question

我是reactjs的初学者。我正在尝试一些例子。以下是我正在处理的程序，但是getDefaultProps和getInitialState没有按预期工作。

当我没有为Greeter组件指定任何名称prop时，

getDefaultProps不返回默认名称。当我指定getInitialState时，我的表单不会显示。

var Greeter = React.createClass({
  getDefaultProps: function() {
    console.log(this.props);
    return 
    {
      name: "React";
    }
  },
  getInitialState: function() {
    return 
    {
      name: this.props.name;
    }
  },
  onButtonClick: function(e) {
    e.preventDefault();

    var name = this.refs.name.value;
    this.setState({
      name: name
    });

    //alert(name);
  },
  render: function() {
    var name = this.state.name;
    return (
      <div>
        <h1>Hi {name}</h1>
        <p>This is from the react component</p>

        <form onSubmit={this.onButtonClick}>
          <input type="text" ref="name" />
          <button>Set Name</button>
        </form>
      </div>
    );
  }
});

var name = "Lmntrix";

ReactDOM.render(<Greeter name={name} />, document.getElementById("app"));

Answer 1

您的对象已在新行返回，我认为这会导致javascript返回undefined：

getDefaultProps: function ()
{
    console.log(this.props);
    return
    {
        name:"React"
    };
},
getInitialState: function()
{
    return
    {
        name: this.props.name;
    }
},

当我将代码写入prettier时，它会自动添加分号，这证明了我的观点：

  getDefaultProps: function() {
    console.log(this.props);
    return;
    {
      name: "React";
    }
  },
  getInitialState: function() {
    return;
    {
      name: this.props.name;
    }
  },

所以要解决这个问题：

  getDefaultProps: function() {
    console.log(this.props);
    return {
      name: "React";
    }
  },
  getInitialState: function() {
    return {
      name: this.props.name;
    }
  },

getDefaultProps和getInitialState无法按预期工作

1 个答案: