react.js - React中关于props的一个问题

问题描述

问 题

关于操作React中的props，为什么会出现下面的两种情况，不知道该如何解释，any help will be great，thank you...

var Demo=React.createClass({
  test1:function(){
    this.props.arr1=2;
    console.log(this.props.arr1);//TypeError: "arr" is read-only
  },
  test2:function(){
    this.props.arr2.push(2);
    console.log(this.props.arr2);//Array [ 1, 2 ]
  },
  getDefaultProps:function(){
    return {arr1:1,arr2:[1]};
  },
  render:function(){
    return (
    <div>
      <div onClick={this.test1}>demo1</div>
      <div onClick={this.test2}>demo2</div>
    </div>
    )
  },
});
 ReactDOM.render(<Demo /> , document.body);

这该如何解释呢？是关于值类型和引用类型的原因么

解决方案

你可以在test2里面尝试下 this.props.arr2 = [1, 2]就知道是不是值和引用的原因

这篇关于react.js - React中关于props的一个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！