Props trong ReactJS là gì ?

Chúng ta đã thảo luận về các component và nó là loại trong các bài viết trước của chúng tôi về component. Cho đến bây giờ chúng ta đang làm việc với các component chỉ sử dụng dữ liệu tĩnh. Trong bài viết này, chúng ta sẽ tìm hiểu về cách chúng ta có thể truyền thông tin đến một component.

Các bài viết liên quan:

• Component trong React
• Punycode trong Node.js
• Website là gì? trang web là gì?
• Các gói phần mềm trong Pytorch
• Các stateful component và stateless trong react
• ReactJs component sử dụng TypeScript

Props là gì?

React cho phép chúng ta truyền thông tin đến một component bằng cách sử dụng một thứ gọi là Props (viết tắt của thuộc tính). Props về cơ bản là loại biến hoặc đối tượng toàn cục. Chúng ta sẽ tìm hiểu về những điều này một cách chi tiết trong bài viết này.

Props được sử dụng để truyền dữ liệu và phương thức từ component mẹ sang component con. Những điều thú vị về props.

1. Chúng là bất biến
2. Chúng cho phép tạo ra các components có thể tái sử dụng

Xem thêm ReactJS là gì? cách cài đặt ReactJS

Tại sao sử dụng Props trong ReactJS

Props trong ReactJS được sử dụng để truyền dữ liệu từ một component cha sang một component con. Điều này cho phép bạn tái sử dụng mã và giảm sự phức tạp của mã, vì bạn chỉ cần xác định giá trị của props trong component cha và truyền nó sang component con.

Ví dụ, nếu bạn muốn hiển thị tên của một người dùng trong một component, bạn có thể tạo ra một component cha với tên của người dùng là một prop, và truyền nó sang component con để hiển thị tên.

Trong tổng quan, sử dụng props trong ReactJS giúp bạn tái sử dụng mã và giảm sự phức tạp của mã, và cho phép bạn truyền dữ liệu từ component cha sang component con dễ dàng và một cách trực quan.

Ví dụ:

class Parent extends React.Component{ 
 doSomething(){ 
 console.log("Parent component"); 
 } 
 render() { 
 return <div> 
 <Child 
 text="This is the child number 1" 
 title="Title 1" 
 onClick={this.doSomething} /> 
 <Child 
 text="This is the child number 2" 
 title="Title 2" 
 onClick={this.doSomething} /> 
 </div> 
 } 
} 
class Child extends React.Component{ 
 render() { 
 return <div> 
 <h1>{this.props.title}</h1> 
 <h2>{this.props.text}</h2> 
 </div> 
 } 
} 

Trong ví dụ trên, nhờ các props, chúng ta có thể tạo ra các components có thể tái sử dụng.

1. Default props

Defaultprops cho phép bạn đặt giá trị mặc định hoặc dự phòng cho các component props. Defaultprops hữu ích khi bạn gọi các component từ các dạng xem khác nhau với các props cố định, nhưng ở 1 số dạng xem, bạn cần chuyển giá trị khác nhau

Cú pháp:

//cấu trúc ES5
var MyClass = React.createClass({ 
 getDefaultProps: function() { 
 return { 
 randomObject: {},
 ... 
 }; 
 } 
} 
//Cấu trúc ES6 
class MyClass extends React.Component {...} 
MyClass.defaultProps = { 
 randomObject: {}, 
 ... 
} 
//Cấu trúc ES7 
class MyClass extends React.Component {  
 static defaultProps = { 
 randomObject: {}, 
 ... 
 }; 
} 

Kết quả của getDefaultProps() hoặc defaultProps sẽ được lưu vào bộ nhớ cache và được sử dụng để đảm bảo rằng this.props.randomObject sẽ có 1 giá trị nếu nó không được chỉ định bởi component mẹ

2. PropTypes

propTypes cho phép bạn chỉ định các prop mà component của bạn cần. Component của bạn sẽ hoạt động mà không cần đặt propTypes, nhưng bạn nên xác định những điều này vì nó sẽ làm cho các component của bạn dễ đọc hơn, hoạt động như tài liệu cho các nhà phát triển khác đang đọc component của bạn và trong quá trình phát triển, React sẽ cảnh báo bạn, nếu bạn cố gắn đặt props khác với định nghĩa bạn đã đặt trước đó.

Một số propTypes đặc trưng và thường được sử dụng trong propTypes:

optionalArray: React.PropTypes.array, 
 optionalBool: React.PropTypes.bool, 
 optionalFunc: React.PropTypes.func, 
 optionalNumber: React.PropTypes.number, 
 optionalObject: React.PropTypes.object, 
 optionalString: React.PropTypes.string, 
 optionalSymbol: React.PropTypes.symbol 

Nếu bạn đính kèm isRequired vào bất kỳ propType nào thì prop đó phải được cung cấp trong khi tạo phiên bản của component đó. Nếu bạn không cung cấp propTypes cần thiết thì không thể tạo component.

Cú pháp:

// cú pháp ES5 
var MyClass = React.createClass({ 
 propTypes: { 
 randomObject: React.PropTypes.object,
 callback: React.PropTypes.func.isRequired, 
 ... 
 } 
} 
//cú pháp ES6 
class MyClass extends React.Component {...} 
MyClass.propTypes = { 
 randomObject: React.PropTypes.object, 
 callback: React.PropTypes.func.isRequired, 
 ... 
}; 
//Cú pháp ES7 
class MyClass extends React.Component {  
 static propTypes = { 
 randomObject: React.PropTypes.object, 
 callback: React.PropTypes.func.isRequired, 
 ... 
 }; 
} 

3. Xác định props

Theo cách tương tự, PropTypes cho phép bạn xác định các props 

Xác định đối tượng

randomObject: React.PropTypes.shape({ 
 id: React.PropTypes.number.isRequired, 
 text: React.PropTypes.string, 
 }).isRequired, 

Xác thực trên mảng đối tượng

…

 arrayOfObjects: React.PropTypes.arrayOf(React.PropTypes.shape({ 
 id: React.PropTypes.number.isRequired, 
 text: React.PropTypes.string, 
 })).isRequired, 

… 

4. Chuyển xuống các props bằng toán tử spread

Thay vì:

var component = <Component foo={this.props.x} bar={this.props.y} />;

Trong trường hợp mỗi thuộc tính cần được chuyển dưới dạng một giá trị prop duy nhất, bạn có thể sử dụng toán tử spread … được hỗ trợ cho các mảng trong ES6 để chuyển xuống tất cả các giá trị của bạn. Component bây giờ sẽ giống như thế này.

var component = <Component {...props} />;

Hãy nhớ rằng các thuộc tính của đối tượng mà bạn truyền vào được sao chép vào prop của component. Thứ tự là quan trọng. Các thuộc tính sau này sẽ ghi đè các thuộc tính trước đó.

var props = { foo: 'default' }; 
var component = <Component {...props} foo={'override'} />; 
 	console.log(component.props.foo); // 'override'

Một trường hợp khác là bạn cũng có thể sử dụng toán tử spread để chỉ chuyển các phần của prop cho các components con, sau đó bạn có thể sử dụng lại cú pháp hủy cấu trúc từ prop.

Nó rất hữu ích khi các components con cần nhiều props nhưng không muốn chuyển từng cái một.

const { foo, bar, other } = this.props // { foo: 'foo', bar: 'bar', other: 'other' }; var component = <Component {...{foo, bar}} />; 
const { foo, bar } = component.props 
 console.log(foo, bar); // 'foo bar' 

5. Props.children và component kết hợp

Các components “con” của một component có sẵn trên một prop,  props.children . Đề xuất này rất hữu ích cho việc “Kết hợp” các components với nhau và có thể làm cho đánh dấu JSX trực quan hơn hoặc phản ánh cấu trúc cuối cùng dự kiến ​​của DOM:

var SomeComponent = function () { 
 return ( 
 <article className="textBox"> 
 <header>{this.props.heading}</header> 
 <div className="paragraphs"> 
 {this.props.children} 
 </div> 
 </article> 
 ); 
} 

Điều này cho phép một số phần tử con tùy ý khi sử dụng component sau này:

var ParentComponent = function () { 
 return ( 
 <SomeComponent heading="Amazing Article Box" > 
 <p className="first"> Lots of content </p> 
 <p> Or not </p> 
 </SomeComponent> 
 ); 
} 

Props.children cũng có thể được điều khiển bởi component. Vì props.children có thể là một mảng hoặc không , nên React cung cấp các hàm tiện ích cho chúng dưới dạng React.Children . Hãy xem xét trong ví dụ trước nếu chúng ta muốn gói mỗi đoạn trong phần tử <section> của riêng nó :

var SomeComponent = function () { 
 return ( 
 <article className="textBox"> 
 <header>{this.props.heading}</header> 
 <div className="paragraphs">
{React.Children.map(this.props.children, function (child) {  return ( 
 <section className={child.props.className}> 
 React.cloneElement(child) 
 </section> 
 ); 
 })} 
 </div> 
 </article> 
 ); 
} 

Lưu ý việc sử dụng React.cloneElement để xóa prop khỏi thẻ <p>  – vì props là bất biến nên không thể thay đổi trực tiếp các giá trị này. Thay vào đó, một bản sao không có các props này phải được sử dụng.

6. Các loại Components con

Đôi khi nó thực sự hữu ích khi biết loại component con khi lặp qua chúng. Để lặp qua các components con, bạn có thể sử dụng React Children. chức năng sử dụng bản đồ :

React.Children.map(this.props.children, (child) => { 
 if (child.type === MyComponentType) { 
 ... 
 } 
}); 

Đối tượng con hiển thị thuộc tính kiểu mà bạn có thể so sánh với 1 component cụ thể.

Xem thêm React Component API

Truyền và truy cập Props

Chúng tôi có thể chuyển các Props cho bất kỳ component nào khi chúng tôi khai báo các thuộc tính cho bất kỳ thẻ HTML nào. Hãy xem đoạn mã dưới đây:

<DemoComponent sampleProp = "Demo Props" />

Trong đoạn mã trên, chúng tôi đang chuyển một phần mềm có tên là sampleProp tới component có tên DemoComponent. Giá trị này có giá trị “Demo Props”. Bây giờ chúng ta hãy xem làm thế nào chúng ta có thể truy cập các Props này.

Chúng tôi có thể truy cập bất kỳ Props nào bên trong từ lớp của component mà Props được chuyển đến. Các Props có thể được truy cập như hình dưới đây:

this.props.propName;

Chúng tôi có thể truy cập bất kỳ phần mềm hỗ trợ nào từ bên trong lớp của một component bằng cách sử dụng cú pháp trên. ‘This.props’ là một loại đối tượng toàn cục lưu trữ tất cả các Props component. PropName, đó là tên của các Props là chìa khóa của đối tượng này.

Truyền Props thông qua Class

Dưới đây là một chương trình mẫu để minh họa cách chuyển và truy cập các Props từ một component:

import React from 'react';
import ReactDOM from 'react-dom';

// Ví dụ về DEmo Component
class Component extends React.Component{
	render(){
		return(

				<div>
					{/*truy cập vào props */}
					<h2>Hello {this.props.user}</h2>
					<h3>Welcome websitehcm.com</h3>
				</div>
			);
	}
}
ReactDOM.render(
	// truyền thông tin Props
	<DemoComponent user = "websitehcm" />,
	document.getElementById("root")
);

Trong ví dụ trên, chúng tôi đã sử dụng một component dựa trên lớp để minh họa các Props. Nhưng chúng ta có thể chuyển các Props cho một component dựa trên hàm giống như chúng ta đã làm trong ví dụ trên.

Xem thêm CSS trong React

Nhưng để truy cập một chỗ dựa từ một hàm, chúng ta không cần sử dụng từ khóa ‘this’ nữa. Các component chức năng chấp nhận Props làm tham số và có thể được truy cập trực tiếp.

Truyền Props thông qua function

Dưới đây là ví dụ tương tự như trên nhưng lần này sử dụng một component dựa trên function thay vì một component dựa trên class.

Mở dự án phản ứng của bạn và chỉnh sửa tệp App.js trong thư mục src:

import React from 'react';
import ReactDOM from 'react-dom';

// functional Demo component
function DemoComponent(props){
	return(
		<div>
			{/*truy cập thông tin thông qua tham số hàm*/}
			<h2>Hello {props.user}</h2>
			<h3>Welcome to websitehcm.com</h3>
		</div>
	);
}

ReactDOM.render(
	// gửi thông tin props
	<DemoComponent user = "websitehcm" />,
	document.getElementById("root")
);

Đầu ra của chương trình này sẽ giống như đầu ra của chương trình trên. Sự khác biệt duy nhất là chúng tôi đã sử dụng một component dựa trên function thay vì một component dựa trên Class.

Xem thêm Điều kiện Rendering trong react

Truyền thông tin từ component này sang component khác

Đây là một trong những tính năng thú vị nhất của React. Chúng ta có thể tạo ra các component để tương tác với nhau. Chúng tôi sẽ xem xét hai component Parent và Child để giải thích điều này.

Chúng tôi sẽ chuyển một số thông tin làm Props từ component Gốc của chúng tôi sang component Con. Chúng tôi có thể chuyển bao nhiêu Props tùy thích cho một component.

Nhìn vào đoạn mã dưới đây:

import React from 'react';
import ReactDOM from 'react-dom';

// Class Parent Component
class Parent extends React.Component{
	render(){
		return(
				<div>
					<h2>Thông tin trong class Parent</h2>
					<Child name="User" userId = "5555"/>
				</div>
			);
	}
}

// Class Child Component
class Child extends React.Component{
	render(){
		return(
				<div>
					<h2>Hello, {this.props.name}</h2>
					<h3>Thông tin trong class child</h3>
					<h3>User id là gì: {this.props.userId}</h3>
				</div>
			);
	}
}

ReactDOM.render(
	// truyền thông tin Props
	<Parent />,
	document.getElementById("root")
);

Mở dự án của bạn và chỉnh sửa tệp App.js trong thư mục src:

Vì vậy, chúng ta đã thấy các Props trong React và cũng đã tìm hiểu về cách các Props được sử dụng, cách chúng có thể được chuyển cho một component, cách chúng được truy cập bên trong một component và hơn thế nữa.

Chúng tôi đã sử dụng “this.props.propName” rất thường xuyên trong kịch bản hoàn chỉnh này để truy cập các Props. Bây giờ chúng ta hãy kiểm tra những gì thực sự đang được lưu trữ trong này.

Chúng tôi sẽ console.log “this.props” trong chương trình trên bên trong component con và sẽ cố gắng quan sát những gì được đăng nhập vào bảng console. Dưới đây là chương trình đã sửa đổi với câu lệnh console.log ():

Mở dự án phản ứng của bạn và chỉnh sửa tệp App.js trong thư mục src:

import React from 'react';
import ReactDOM from 'react-dom';

// Class Parent Component
class Parent extends React.Component{
	render(){
		return(
				<div>
					<h2>Thông tin trong Parent component</h2>
					<Child name="User" userId = "5555"/>
				</div>
			);
	}
}

// Class Child Component
class Child extends React.Component{
	render(){
		console.log(this.props);
		return(
				<div>
					<h2>Hello, {this.props.name}</h2>
					<h3>Thông tin trong class child</h3>
					<h3>Your user id is: {this.props.userId}</h3>
				</div>
			);
	}
}

ReactDOM.render(
	// passing props
	<Parent />,
	document.getElementById("root")
);

Bạn có thể thấy rõ trong hình trên rằng trong bảng điều khiển hiển thị rằng this.props là một đối tượng và nó chứa tất cả các Props được chuyển cho component con. Tên Props của component con là các khóa của đối tượng này và giá trị của chúng là giá trị của các khóa này. Vì vậy, rõ ràng là bây giờ bất kỳ thông tin nào được chuyển đến một component bằng cách sử dụng Props đều được lưu trữ bên trong một đối tượng.

Lưu ý: Props ở chế độ chỉ đọc. Chúng tôi không được phép sửa đổi nội dung của một chỗ dựa. Dù loại component là gì – theo chức năng hay dựa trên lớp, không ai trong số chúng được phép sửa đổi Props của chúng.

Xem thêm State và Props trong react

ReactJS Props Validator

Props là một cơ chế quan trọng để chuyển các thuộc tính chỉ đọc cho các thành phần React. Các props thường được yêu cầu sử dụng chính xác trong thành phần. Nếu nó không được sử dụng đúng cách, các thành phần có thể không hoạt động như mong đợi. Do đó, cần phải sử dụng xác nhận props để cải thiện các thành phần phản ứng.

Xác thực props là một công cụ sẽ giúp các nhà phát triển tránh được các lỗi và sự cố trong tương lai. Đó là một cách hữu ích để buộc sử dụng đúng các thành phần của bạn. Nó làm cho mã của bạn dễ đọc hơn. Các thành phần React đã sử dụng thuộc tính đặc biệt PropTypes giúp bạn bắt lỗi bằng cách xác thực các kiểu dữ liệu của các giá trị được chuyển qua các props, mặc dù không cần thiết phải xác định các thành phần bằng propTypes. Tuy nhiên, nếu bạn sử dụng propTypes với các thành phần của mình, nó sẽ giúp bạn tránh được các lỗi không mong muốn.

App.propTypes được sử dụng để xác thực props trong thành phần phản ứng. Khi một số props được chuyển với loại không hợp lệ, bạn sẽ nhận được cảnh báo trên bảng điều khiển JavaScript. Sau khi chỉ định các mẫu xác thực, bạn sẽ đặt App.defaultProps

Ưu và nhược điểm của Props trong ReactJS

Ưu điểm của Props trong ReactJS:

1. Tái sử dụng mã: Props cho phép bạn tái sử dụng mã bằng cách tạo ra một component cha với giá trị của props và truyền nó sang component con.
2. Giảm sự phức tạp của mã: Props giúp giảm sự phức tạp của mã bằng cách cho phép bạn truyền dữ liệu từ component cha sang component con dễ dàng và trực quan.
3. Dễ dàng tra cứu: Props cung cấp một cách dễ dàng để tra cứu giá trị của props trong component con.

Nhược điểm của Props trong ReactJS:

1. Chỉ dùng để truyền dữ liệu: Props chỉ có thể được sử dụng để truyền dữ liệu từ component cha sang component con, nó không thể được sử dụng để thay đổi giá trị của props trong component con.
2. Không thể sử dụng trực tiếp: Props không thể được sử dụng trực tiếp trong component con, bạn phải sử dụng một biến để lưu trữ giá trị của props trước khi sử dụng nó.
3. Không giống như biến: Props không giống như biến, nó chỉ có thể được truyền từ component cha sang component con, và không thể được thay đổi trong component con.

Các câu hỏi phổ biến về Props trong ReactJS

1. Props là gì trong ReactJS?

• Props là viết tắt của “Properties” (từ tiếng Anh có nghĩa là “Thuộc tính”), là một đối tượng truyền giữa các component trong ReactJS. Props chứa các dữ liệu đầu vào cho component và cho phép component tái sử dụng lại một cách linh hoạt.

2. Làm thế nào để truyền Props cho một component trong ReactJS?

• Để truyền Props cho một component trong ReactJS, ta có thể sử dụng cú pháp “<Component propName={propValue} />”. Trong đó, propName là tên của prop mà ta muốn truyền, propValue là giá trị của prop đó.

3. Props có thể được thay đổi trong một component không?

• Không, Props là dữ liệu không thể thay đổi trong một component. Props chỉ được truyền từ component cha xuống component con, và sử dụng để hiển thị dữ liệu mà không bị thay đổi.

4. Làm thế nào để kiểm tra kiểu dữ liệu của Props trong ReactJS?

• Ta có thể sử dụng PropTypes để kiểm tra kiểu dữ liệu của Props trong ReactJS. PropTypes là một package được cung cấp bởi ReactJS, cho phép ta xác định kiểu dữ liệu của Props và cảnh báo khi Props được truyền vào không đúng kiểu dữ liệu mong muốn.

5. Làm thế nào để mặc định giá trị của Props trong ReactJS?

• Ta có thể sử dụng defaultProps để mặc định giá trị của Props trong ReactJS. defaultProps là một thuộc tính của component, cho phép ta xác định giá trị mặc định cho Props nếu không có giá trị được truyền vào.

6. Làm thế nào để truyền Props cho một component con trong ReactJS?

• Ta có thể truyền Props cho một component con trong ReactJS bằng cách sử dụng Props của component cha. Để làm điều này, ta cần truyền Props từ component cha vào component con thông qua các tham số.

7. Làm thế nào để truyền nhiều Props cho một component trong ReactJS?

• Ta có thể truyền nhiều Props cho một component trong ReactJS bằng cách sử dụng nhiều tham số. Để làm điều này, ta cần xác định tên và giá trị của các Props mà ta muốn truyền, sau đó truyền chúng vào component thông qua các tham số.

8. Làm thế nào để sử dụng Props trong component trong ReactJS?

• Để sử dụng Props trong một component trong ReactJS, ta có thể sử dụng biến this.props hoặc props. Ví dụ: để truy cập vào giá trị của một prop có tên là “name”, ta có thể sử dụng “this.props.name” hoặc “props.name”.

9. Props và state khác nhau như thế nào trong ReactJS?

• Props và state là hai khái niệm quan trọng trong ReactJS. Props là dữ liệu đầu vào được truyền giữa các component, trong khi state là dữ liệu nội bộ của component đó. Props là dữ liệu không thể thay đổi, trong khi state có thể thay đổi trong quá trình thực thi.

10. Làm thế nào để xử lý Props trong component trong ReactJS?

• Để xử lý Props trong component trong ReactJS, ta có thể sử dụng các phương thức của component như componentWillMount, componentDidMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, componentDidUpdate, và componentWillUnmount. Các phương thức này được gọi khi Props của component thay đổi hoặc khi component được render lại.