Thành phần lớp phản ứng

Ví dụ

Tạo một thành phần Lớp có tên là Car

 class Car extends React.Component { render() { return <h2>Hi, I am a Car!</h2>; } }

Ví dụ

Hiển thị thành phần Car trong phần tử "root":

 const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car />);

Chạy ví dụ »

Ví dụ

Tạo hàm khởi tạo trong thành phần Xe hơi và thêm thuộc tính màu:

 class Car extends React.Component { constructor() { super(); this.state = {color: "red"}; } render() { return <h2>I am a Car!</h2>; } }

Ví dụ

 class Car extends React.Component { constructor() { super(); this.state = {color: "red"}; } render() { return <h2>I am a {this.state.color} Car!</h2>; } }

Chạy ví dụ »

Ví dụ

Sử dụng một thuộc tính để chuyển màu cho thành phần Xe hơi và sử dụng nó trong hàm render():

 class Car extends React.Component { render() { return <h2>I am a {this.props.color} Car!</h2>; } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car color="red"/>);

Chạy ví dụ »

Ví dụ

 class Car extends React.Component { constructor(props) { super(props); } render() { return <h2>I am a {this.props.model}!</h2>; } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car model="Mustang"/>);

Chạy ví dụ »

Ví dụ

Sử dụng thành phần Ô tô bên trong thành phần Nhà để xe:

 class Car extends React.Component { render() { return <h2>I am a Car!</h2>; } } class Garage extends React.Component { render() { return ( <div> <h1>Who lives in my Garage?</h1> <Car /> </div> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Garage />);

Chạy ví dụ »

Ví dụ

Đây là tệp mới, chúng tôi đặt tên là Car.js :

 import React from 'react'; class Car extends React.Component { render() { return <h2>Hi, I am a Car!</h2>; } } export default Car;

Ví dụ

Bây giờ chúng ta nhập tệp Car.js vào ứng dụng và có thể sử dụng thành phần Car như thể nó được tạo ở đây.

 import React from 'react'; import ReactDOM from 'react-dom/client'; import Car from './Car.js'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car />);

Chạy ví dụ »

Ví dụ

Chỉ định đối tượng state trong phương thức khởi tạo:

 class Car extends React.Component { constructor(props) { super(props); this.state = {brand: "Ford"}; } render() { return ( <div> <h1>My Car</h1> </div> ); } }

Ví dụ

Chỉ định tất cả các thuộc tính mà thành phần của bạn cần:

 class Car extends React.Component { constructor(props) { super(props); this.state = { brand: "Ford", model: "Mustang", color: "red", year: 1964 }; } render() { return ( <div> <h1>My Car</h1> </div> ); } }

Ví dụ:

Tham khảo đối tượng state trong phương thức render() :

 class Car extends React.Component { constructor(props) { super(props); this.state = { brand: "Ford", model: "Mustang", color: "red", year: 1964 }; } render() { return ( <div> <h1>My {this.state.brand}</h1> <p> It is a {this.state.color} {this.state.model} from {this.state.year}. </p> </div> ); } }

Chạy ví dụ »

Ví dụ:

Thêm nút có sự kiện onClick sẽ thay đổi thuộc tính màu:

 class Car extends React.Component { constructor(props) { super(props); this.state = { brand: "Ford", model: "Mustang", color: "red", year: 1964 }; } changeColor = () => { this.setState({color: "blue"}); } render() { return ( <div> <h1>My {this.state.brand}</h1> <p> It is a {this.state.color} {this.state.model} from {this.state.year}. </p> <button type="button" onClick={this.changeColor} >Change color</button> </div> ); } }

Chạy ví dụ »

Ví dụ:

Phương thức constructor được React gọi mỗi khi bạn tạo một thành phần:

 class Header extends React.Component { constructor(props) { super(props); this.state = {favoritecolor: "red"}; } render() { return ( <h1>My Favorite Color is {this.state.favoritecolor}</h1> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Header />);

Chạy ví dụ »

Ví dụ:

Phương thức getDerivedStateFromProps được gọi ngay trước phương thức kết xuất:

 class Header extends React.Component { constructor(props) { super(props); this.state = {favoritecolor: "red"}; } static getDerivedStateFromProps(props, state) { return {favoritecolor: props.favcol }; } render() { return ( <h1>My Favorite Color is {this.state.favoritecolor}</h1> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Header favcol="yellow"/>);

Chạy ví dụ »

Ví dụ:

Một thành phần đơn giản với phương thức render() đơn giản:

 class Header extends React.Component { render() { return ( <h1>This is the content of the Header component</h1> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Header />);

Chạy ví dụ »

Ví dụ:

Lúc đầu, màu yêu thích của tôi là màu đỏ, nhưng hãy chờ một chút, thay vào đó là màu vàng:

 class Header extends React.Component { constructor(props) { super(props); this.state = {favoritecolor: "red"}; } componentDidMount() { setTimeout(() => { this.setState({favoritecolor: "yellow"}) }, 1000) } render() { return ( <h1>My Favorite Color is {this.state.favoritecolor}</h1> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Header />);

Chạy ví dụ »

Ví dụ:

Nếu thành phần được cập nhật, phương thức getDerivedStateFromProps() sẽ được gọi:

 class Header extends React.Component { constructor(props) { super(props); this.state = {favoritecolor: "red"}; } static getDerivedStateFromProps(props, state) { return {favoritecolor: props.favcol }; } changeColor = () => { this.setState({favoritecolor: "blue"}); } render() { return ( <div> <h1>My Favorite Color is {this.state.favoritecolor}</h1> <button type="button" onClick={this.changeColor}>Change color</button> </div> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Header favcol="yellow" />);

Chạy ví dụ »

Ví dụ:

Ngăn thành phần hiển thị ở bất kỳ bản cập nhật nào:

 class Header extends React.Component { constructor(props) { super(props); this.state = {favoritecolor: "red"}; } shouldComponentUpdate() { return false; } changeColor = () => { this.setState({favoritecolor: "blue"}); } render() { return ( <div> <h1>My Favorite Color is {this.state.favoritecolor}</h1> <button type="button" onClick={this.changeColor}>Change color</button> </div> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Header />);

Chạy ví dụ »

Ví dụ:

Ví dụ tương tự như trên, nhưng lần này phương thức shouldComponentUpdate() trả về true :

 class Header extends React.Component { constructor(props) { super(props); this.state = {favoritecolor: "red"}; } shouldComponentUpdate() { return true; } changeColor = () => { this.setState({favoritecolor: "blue"}); } render() { return ( <div> <h1>My Favorite Color is {this.state.favoritecolor}</h1> <button type="button" onClick={this.changeColor}>Change color</button> </div> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Header />);

Chạy ví dụ »

Ví dụ:

Nhấp vào nút để thực hiện thay đổi trạng thái của thành phần:

 class Header extends React.Component { constructor(props) { super(props); this.state = {favoritecolor: "red"}; } changeColor = () => { this.setState({favoritecolor: "blue"}); } render() { return ( <div> <h1>My Favorite Color is {this.state.favoritecolor}</h1> <button type="button" onClick={this.changeColor}>Change color</button> </div> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Header />);

Chạy ví dụ »

Ví dụ:

Sử dụng phương thức getSnapshotBeforeUpdate() để tìm hiểu xem đối tượng state trông như thế nào trước khi cập nhật:

 class Header extends React.Component { constructor(props) { super(props); this.state = {favoritecolor: "red"}; } componentDidMount() { setTimeout(() => { this.setState({favoritecolor: "yellow"}) }, 1000) } getSnapshotBeforeUpdate(prevProps, prevState) { document.getElementById("div1").innerHTML = "Before the update, the favorite was " + prevState.favoritecolor; } componentDidUpdate() { document.getElementById("div2").innerHTML = "The updated favorite is " + this.state.favoritecolor; } render() { return ( <div> <h1>My Favorite Color is {this.state.favoritecolor}</h1> <div id="div1"></div> <div id="div2"></div> </div> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Header />);

Chạy ví dụ »

Ví dụ:

Phương thức componentDidUpdate được gọi sau khi bản cập nhật được hiển thị trong DOM:

 class Header extends React.Component { constructor(props) { super(props); this.state = {favoritecolor: "red"}; } componentDidMount() { setTimeout(() => { this.setState({favoritecolor: "yellow"}) }, 1000) } componentDidUpdate() { document.getElementById("mydiv").innerHTML = "The updated favorite is " + this.state.favoritecolor; } render() { return ( <div> <h1>My Favorite Color is {this.state.favoritecolor}</h1> <div id="mydiv"></div> </div> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Header />);

Chạy ví dụ »

Ví dụ:

Bấm vào nút để xóa tiêu đề:

 class Container extends React.Component { constructor(props) { super(props); this.state = {show: true}; } delHeader = () => { this.setState({show: false}); } render() { let myheader; if (this.state.show) { myheader = <Child />; }; return ( <div> {myheader} <button type="button" onClick={this.delHeader}>Delete Header</button> </div> ); } } class Child extends React.Component { componentWillUnmount() { alert("The component named Header is about to be unmounted."); } render() { return ( <h1>Hello World!</h1> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Container />);

Chạy ví dụ »