React Props

简介: 10月更文挑战第8天

在 React 中,Props(属性)是用于将数据从父组件传递到子组件的机制,Props 是只读的,子组件不能直接修改它们,而是应该由父组件来管理和更新。

state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。


使用 Props

传递 Props 语法:

<ComponentName propName={propValue} />

以下实例演示了如何在组件中使用 props:

React 实例

function HelloMessage(props) {    return <h1>Hello {props.name}!</h1>;} const element = <HelloMessage name="Runoob"/>;  const root = ReactDOM.createRoot(document.getElementById("root"));root.render(    element);


尝试一下 »

实例中 name 属性通过 props.name 来获取。


默认 Props

你可以通过组件类的 defaultProps 属性为 props 设置默认值,实例如下:

React 实例

class HelloMessage extends React.Component {  render() {    return (      <h1>Hello, {this.props.name}</h1>     );   }} HelloMessage.defaultProps = {  name: 'Runoob'};  const element = <HelloMessage/>;  const root = ReactDOM.createRoot(document.getElementById("root"));root.render(  element);


尝试一下 »

多个 Props

可以传递多个属性给子组件。

实例

const UserCard = (props) => {

 return (

   <div>

     <h2>{props.name}</h2>

     <p>Age: {props.age}</p>

     <p>Location: {props.location}</p>

   </div>

 );

};


const App = () => {

 return (

   <UserCard name="Alice" age={25} location="New York" />

 );

};


ReactDOM.render(<App />, document.getElementById('root'));

propTypes 验证

propTypes 是 React 提供的一种工具,用于对组件的 props 进行类型检查。

可以使用 prop-types 库对组件的 props 进行类型检查。

在 React 中,propTypes 作为组件的一个静态属性来定义。首先,你需要安装 prop-types 包:

npm install prop-types

然后,在你的组件文件中引入 prop-types,并定义 propTypes 属性。下面是一个示例

实例

import PropTypes from 'prop-types';


const Greeting = (props) => {

 return <h1>Hello, {props.name}!</h1>;

};


Greeting.propTypes = {

 name: PropTypes.string.isRequired

};


const App = () => {

 return (

   <div>

     <Greeting name="Alice" />

     {/* <Greeting />  // 这行代码会导致控制台警告,因为 name 是必需的 */}

   </div>

 );

};


ReactDOM.render(<App />, document.getElementById('root'));

传递回调函数作为 Props

可以将函数作为 props 传递给子组件,子组件可以调用这些函数来与父组件进行通信。

实例

class ParentComponent extends React.Component {

 constructor(props) {

   super(props);

   this.state = { message: '' };

 }


 handleMessage = (msg) => {

   this.setState({ message: msg });

 };


 render() {

   return (

     <div>

       <ChildComponent onMessage={this.handleMessage} />

       <p>Message from Child: {this.state.message}</p>

     </div>

   );

 }

}


const ChildComponent = (props) => {

 const sendMessage = () => {

   props.onMessage('Hello from Child!');

 };


 return (

   <div>

     <button onClick={sendMessage}>Send Message</button>

   </div>

 );

};


ReactDOM.render(<ParentComponent />, document.getElementById('root'));

解构 Props

在函数组件中,可以通过解构 props 来简化代码。

实例

const Greeting = ({ name }) => {

 return <h1>Hello, {name}!</h1>;

};


const App = () => {

 return <Greeting name="Alice" />;

};


ReactDOM.render(<App />, document.getElementById('root'));

小结

  • 传递和使用 Props:父组件传递数据给子组件,子组件通过 props 接收。
  • 默认 Props:使用 defaultProps 设置组件的默认属性值。
  • PropTypes 验证:使用 prop-types 库对 props 进行类型检查。
  • 传递回调函数:父组件可以将函数作为 props 传递给子组件,以实现组件间通信。
  • 解构 Props:在函数组件中解构 props 以简化代码。

State 和 Props

以下实例演示了如何在应用中组合使用 state 和 props 。我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上。在 render 函数中, 我们设置 name 和 site 来获取父组件传递过来的数据。

React 实例

class WebSite extends React.Component {  constructor() {      super();         this.state = {        name: "菜鸟教程",         site: "https://www.runoob.com"      }    }  render() {    return (      <div>         <Name name={this.state.name} />         <Link site={this.state.site} />       </div>     );   }}     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>     );   }} const root = ReactDOM.createRoot(document.getElementById("root"));root.render(  <WebSite />);


尝试一下 »


Props 验证

React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库。

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js" type="application/javascript"></script>

Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时,JavaScript 控制台会抛出警告。

以下实例创建一个 Mytitle 组件,属性 title 是必须的且是字符串,非字符串类型会自动转换为字符串 :

React 16.4 实例

var title = "菜鸟教程";// var title = 123;class MyTitle extends React.Component {  render() {    return (      <h1>Hello, {this.props.title}</h1>     );   }} MyTitle.propTypes = {  title: PropTypes.string};const root = ReactDOM.createRoot(document.getElementById("root"));root.render(    <MyTitle title={title} />);


尝试一下 »

React 15.4 实例

var title = "菜鸟教程";// var title = 123;var MyTitle = React.createClass({  propTypes: {    title: React.PropTypes.string.isRequired,   },     render: function() {     return <h1> {this.props.title} </h1>;    }});const root = ReactDOM.createRoot(document.getElementById("root"));root.render(    <MyTitle title={title} />);


尝试一下 »

当然,可以为你介绍更多的 PropTypes 验证器以及如何使用它们。以下是一些常用的 PropTypes 验证器说明:

基本数据类型

  • PropTypes.string:字符串
  • PropTypes.number:数字
  • PropTypes.boolean:布尔值
  • PropTypes.object:对象
  • PropTypes.array:数组
  • PropTypes.func:函数
  • PropTypes.symbol:Symbol

特殊类型

  • PropTypes.node:任何可以被渲染的内容:数字、字符串、元素或数组(包括这些类型)
  • PropTypes.element:React元素
  • PropTypes.instanceOf(Class):某个类的实例

组合类型

  • PropTypes.oneOf(['option1', 'option2']):枚举类型,值必须是所提供选项之一
  • PropTypes.oneOfType([PropTypes.string, PropTypes.number]):多个类型中的一个
  • PropTypes.arrayOf(PropTypes.number):某种类型组成的数组
  • PropTypes.objectOf(PropTypes.number):某种类型组成的对象
  • PropTypes.shape({ key: PropTypes.string, value: PropTypes.number }):具有特定形状的对象

其他

  • PropTypes.any:任何类型
  • PropTypes.exact({ key: PropTypes.string }):具有特定键的对象,且不能有其他多余的键

以下是一些示例代码,展示了如何使用不同的 PropTypes 验证器:

实例

import React from 'react';

import ReactDOM from 'react-dom/client';

import PropTypes from 'prop-types';


class MyComponent extends React.Component {

 static propTypes = {

   title: PropTypes.string.isRequired, // 必须是字符串且必需

   age: PropTypes.number,              // 可选的数字

   isAdmin: PropTypes.bool,            // 可选的布尔值

   user: PropTypes.shape({             // 必须是具有特定形状的对象

     name: PropTypes.string,

     email: PropTypes.string

   }),

   items: PropTypes.arrayOf(PropTypes.string), // 必须是字符串数组

   callback: PropTypes.func,           // 可选的函数

   children: PropTypes.node,           // 可选的可以渲染的内容

   options: PropTypes.oneOf(['option1', 'option2']), // 必须是特定值之一

 };


 render() {

   return (

     <div>

       <h1>{this.props.title}</h1>

       {this.props.age && <p>Age: {this.props.age}</p>}

       {this.props.isAdmin && <p>Admin</p>}

       {this.props.user && (

         <div>

           <p>Name: {this.props.user.name}</p>

           <p>Email: {this.props.user.email}</p>

         </div>

       )}

       {this.props.items && (

         <ul>

           {this.props.items.map((item, index) => (

             <li key={index}>{item}</li>

           ))}

         </ul>

       )}

       {this.props.callback && (

         <button onClick={this.props.callback}>Click me</button>

       )}

       {this.props.children}

       {this.props.options && <p>Option: {this.props.options}</p>}

     </div>

   );

 }

}


const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

 <MyComponent

   title="Hello, World!"

   age={30}

   isAdmin={true}

   user={{ name: "John Doe", email: "john@example.com" }}

   items={['Item 1', 'Item 2', 'Item 3']}

   callback={() => alert('Button clicked!')}

   options="option1"

 >

   <p>This is a child element</p>

 </MyComponent>

);

目录
相关文章
|
3月前
|
前端开发 JavaScript
react学习(13)props
react学习(13)props
|
4月前
|
前端开发
React函数式组件props的使用(六)
【8月更文挑战第14天】React函数式组件props的使用(六)
65 1
React函数式组件props的使用(六)
|
3月前
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
34 0
|
3月前
|
前端开发
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
本文介绍了在React项目中如何添加路径别名alias以简化模块引入路径,设置组件props的默认值,以及如何二次封装Ant Design的Modal组件。文章还提供了具体的代码示例,包括配置Webpack的alias、设置defaultProps以及封装Modal组件的步骤和方法。
82 1
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
|
3月前
|
前端开发
react学习(15)函数式组件中使用props
react学习(15)函数式组件中使用props
|
3月前
|
前端开发
react学习(14)类式组件的构造器与props
react学习(14)类式组件的构造器与props
|
3月前
|
前端开发 JavaScript
React 中的 props 属性传递技巧
【9月更文挑战第6天】本文详细介绍了React中`props`的基本用法,包括传递基本数据类型、对象和数组。文章通过多个代码示例展示了如何正确使用`props`,并探讨了常见的问题及解决方法,如`props`不可变性、默认值设置及类型检查等。正确掌握这些技巧有助于提升编程效率,编写出更健壮的代码。
77 13
|
4月前
|
前端开发 JavaScript
React类组件props的使用(五)
【8月更文挑战第14天】React类组件props的使用(五)
49 1
React类组件props的使用(五)
|
4月前
|
开发者
告别繁琐代码,JSF标签库带你走进高效开发的新时代!
【8月更文挑战第31天】JSF(JavaServer Faces)标准标签库为页面开发提供了大量组件标签,如`&lt;h:inputText&gt;`、`&lt;h:dataTable&gt;`等,简化代码、提升效率并确保稳定性。本文通过示例展示如何使用这些标签实现常见功能,如创建登录表单和展示数据列表,帮助开发者更高效地进行Web应用开发。
46 0
|
4月前
|
前端开发 API 开发者
【React状态管理新思路】Context API入门:从零开始摆脱props钻孔的优雅之道,全面解析与实战案例分享!
【8月更文挑战第31天】React 的 Context API 有效解决了多级组件间状态传递的 &quot;props 钻孔&quot; 问题,使代码更简洁、易维护。本文通过电子商务网站登录状态管理案例,详细介绍了 Context API 的使用方法,包括创建、提供及消费 Context,以及处理多个 Context 的场景,适合各水平开发者学习与应用,提高开发效率和代码质量。
42 0