Props trong ReactJS là gì

Props trong ReactJS là gì

Rate this post

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.

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

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.

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

  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ẹ

  1. 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, 
 ... 
 }; 
} 
  1. 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, 

… 

  1. 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' 
  1. 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.

  1. 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ể.

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.

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.

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.

Props trong ReactJS là gì

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. Chúng ta sẽ tìm hiểu chi tiết về vấn đề này trong bài viết tiếp theo Reactjs | bộ Props-2

Leave a Reply