ReactJS编程—state 和props数据传递

一、state vs props

state对象，可以理解为组件内置的对象，通过更新赋值给state 类改变、重新渲染用户界面。类似java类中private属性的载体，用于传递类私有的数值。

class WebSite extends React.Component {
  constructor() {
      super();
      this.state = {
        name: "max",
        site: "https://www.max.com"
      }
    }

  render() {
    return (
      <div>
        //render中通过 name 和 site 来获取内部state传递过来的数据
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
}

props则显然的，类如外部传入的、从父类中继承来的属性数值，则通过props进行传递。

//通过props 在组件间进行数据传递
class Name extends React.Component {
  render() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
}
 
class Link extends React.Component {
  render() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
}
 
ReactDOM.render(