ReactJS编程—state 和props数据传递

钟艾伶

已于 2022-05-09 17:13:07 修改

阅读量776

点赞数

分类专栏：【React】文章标签： react props state

于 2019-05-05 21:50:19 首次发布

本文链接：https://blog.youkuaiyun.com/Daybreak1209/article/details/89855896

版权

本文探讨了ReactJS中state与props的区别。state作为组件内部的状态对象，用于改变并重新渲染界面，而props则用于接收和传递外部属性值。文章还详细介绍了props的使用细节，包括入参类型声明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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(