react组件的 props

最新推荐文章于 2025-09-09 07:49:55 发布

原创最新推荐文章于 2025-09-09 07:49:55 发布 · 555 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了组件props的作用，如何通过函数和类组件方式接收和传递数据，强调了props的只读特性，并讨论了在类组件中正确使用super的注意事项。涵盖了传递任意类型数据、构造函数中处理props的方法以及各类组件实例应用。

组件的 props

1.props的作用

接收传递给组件数据

2.实现方式

①函数


//2.接收数据
const Hello = (props) =>{
  //props是一个对象
  return (
    <div>
      <h1>props:{props.name}</h1>
    </div>
  )
}

//1.传递数据
ReactDOM.render(<Hello name="jack" age={23}/>,document.getElementById('root'))

②组件

//2.接收数据
class Hello extends React.Component {
  render() {
    return (
      <div>
        <h1>props:{this.props.name}</h1>
      </div>
    )
  }
}

//1.传递数据
ReactDOM.render(<Hello name="jack" age={23}/>,document.getElementById('root'))

3.特点

1.可以给组件传递任意类型的数据
2.props是只读的对象，只能读取属性的值，无法修改对象
3.注意：使用类组件时，如果写了构造函数，应该将props传递给super()，否则无法在构造函数中获取到props

//2.接收数据
class Hello extends React.Component {
  constructor(props) {
    super(props)
    //console.log(this.props);
    console.log(props);
  }
  render() {
    return (
      <div>
        <h1>props:{this.props.name}</h1>
      </div>
    )
  }
}

//1.传递数据
ReactDOM.render(<Hello name="jack" age={23}/>,document.getElementById('root'))