API Komponen React

  • Post
     

    API Komponen React

    Komponen ReactJS adalah API tingkat atas. Itu membuat kode sepenuhnya individual dan dapat digunakan kembali dalam aplikasi. Ini mencakup berbagai metode untuk:

    • Membuat elemen
    • Mengubah elemen
    • Fragmen

    Di sini, kami akan menjelaskan tiga metode terpenting yang tersedia di API komponen React.

    1. setState ()
    2. forceUpdate()
    3. findDOMNode ()

    setState ()

    Metode ini digunakan untuk memperbarui status komponen. Metode ini tidak selalu menggantikan status dengan segera. Sebaliknya, itu hanya menambahkan perubahan ke keadaan asli. Ini adalah metode utama yang digunakan untuk memperbarui antarmuka pengguna (UI) sebagai respons terhadap penanganan peristiwa dan respons server.

    Catatan: Dalam kelas ES6, this.method.bind (this) digunakan untuk mengikat metode setState () secara manual.

    Syntax

    1. this .stateState (object newState [, function callback]);

    Dalam sintaks di atas, ada fungsi callback opsional yang dijalankan setelah setState () selesai dan komponen dirender ulang.

    Contoh

    1. import React, {Component} dari  ‘react’ ;
    2. impor PropTypes dari  ‘prop-types’ ;
    3. class App  memperluas Component {
    4. konstruktor () {
    5. super ();
    6. this .state = {
    7. msg:  “Selamat datang di JavaTpoint”
    8. };
    9. ini .updateSetState =  ini .updateSetState.bind ( ini );
    10. }
    11. updateSetState () {
    12. this .setState ({
    13. msg: “Ini adalah tutorial ReactJS terbaik”
    14. });
    15. }
    16. render () {
    17. kembali (
    18. <h1> { ini .state.msg} </h1>
    19. <button onClick = { this .updateSetState}> SETEL NEGARA </button>
  • );
  • }
  • }
  • ekspor   Aplikasi default ;
  • Main.js

    1. import React from ‘react’ ;
    2. impor ReactDOM from  ‘react-dom’ ;
    3. impor Aplikasi from ‘./App.js’ ;
    4. render (<App />, document.getElementById ( ‘app’ ));

    Ketika Anda mengklik tombol SET STATE , Anda akan melihat layar dengan pesan yang diperbarui.

     

    forceUpdate()

    Metode ini memungkinkan kita untuk memperbarui komponen secara manual.

    Syntax

    1. forceUpdate (callback);

    Contoh

    App.js

    1. import React, {Component} from  ‘react’ ;
    2. class App  extendsComponent {
    3. konstruktor () {
    4. super ();
    5. ini .forceUpdateState =  ini .forceUpdateState.bind ( ini );
    6. }
    7. forceUpdateState () {
    8. ini .forceUpdate ();
    9. };
    10. render () {
    11. return(
    12. <h1> Contoh untuk menghasilkan bilangan acak </h1>
    13. <h3> Nomor acak: {Math.random ()} </h3>
    14. <button onClick = { this .forceUpdateState}> ForceUpdate </button>
    15. );
    16. }
    17. }
    18. export  Aplikasi default ;

     

     

    Setiap kali Anda mengklik tombol ForceUpdate , itu akan menghasilkan nomor acak .

    findDOMNode ()

    Untuk manipulasi DOM, Anda perlu menggunakan metode ReactDOM.findDOMNode () . Metode ini memungkinkan kita untuk menemukan atau mengakses simpul DOM yang mendasarinya.

    Syntax

    1. findDOMNode (komponen);

    Contoh

    Untuk manipulasi DOM, pertama, Anda perlu mengimpor baris ini: impor ReactDOM dari ‘ react-dom ‘ di file App.js Anda .

    App.js

    1. import React, {Component} from ‘react’ ;
    2. impor ReactDOM from  ‘react-dom’ ;
    3. class App  extends Component {
    4. konstruktor () {
    5. super ();
    6. this .findDomNodeHandler1 =  this .findDomNodeHandler1.bind ( this );
    7. this .findDomNodeHandler2 =  this .findDomNodeHandler2.bind ( this );
    8. };
    9. findDomNodeHandler1 () {
    10. var myDiv = document.getElementById ( ‘myDivOne’ );
    11. findDOMNode (myDivOne) .style.color =  ‘red ;
    12. }
    13. findDomNodeHandler2 () {
    14. var myDiv = document.getElementById ( ‘myDivTwo’ );
    15. findDOMNode (myDivTwo) .style.color =  ‘blue’ ;
    16. }
    17. render () {
    18. return (
    19. <h1> ReactJS Temukan Contoh Node DOM </h1>
    20. <button onClick = { this .findDomNodeHandler1}> FIND_DOM_NODE1 </button>
    21. <button onClick = { this .findDomNodeHandler2}> FIND_DOM_NODE2 </button>
    22. <h3 id =  “myDivOne” > JTP-NODE1 </h3>
    23. <h3 id =  “myDivTwo” > JTP-NODE2 </h3>
    24. );
    25. }
    26. }
    27. ekspor   Aplikasi default ;

     

    Setelah Anda mengklik tombol , warna node akan berubah.

     

    credit. javatpoint

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Tagged: 

  • You must be logged in to reply to this topic.