Languages
[Edit]
PL

React - jak wy┼Ťwietli─ç lub ukry─ç element?

3 points
Created by:
Dirask JS Member
3640

W tym artykule chcieliby┼Ťmy pokaza─ç, jak wy┼Ťwietla─ç┬álub ukrywa─ç elementy w React.

Rozwi─ůzanie z jednym przyciskiem

W poni┼╝szym przyk┼éadzie przedstawiamy proste rozwi─ůzanie wykorzystuj─ůce przycisk,┬ákt├│ry┬áukrywa lub┬áwy┼Ťwietla nasz element┬á<div>M├│j element</div>┬á.

Używamy hooka React.useState do przechowywania stanu naszego elementu (widoczny lub ukryty).
Domy┼Ťlnie element jest ukryty. Aby zmieni─ç jego widoczno┼Ť─ç, musimy przekaza─ç zanegowany┬áargument visible┬ádo funkcji┬áonClick┬áobs┼éuj─ůcej┬ázdarzenie.

Praktyczny przykład:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj wiersze z importami podczas pracy z kompilatorem JSX.

// import React from 'react';

const App = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <div>
      <button onClick={() => setVisible(!visible)}>
        {visible ? 'Ukryj' : 'Wy┼Ťwietl'}
      </button>
      {visible && <div>M├│j element</div>}
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Rozwi─ůzanie z dwoma przyciskami

W poni┼╝szym przyk┼éadzie przedstawiamy rozwi─ůzanie z dwoma oddzielnymi┬ákomponentami przycisk├│w┬ádo pokazywania i ukrywania elementu┬á<div>M├│j element</div>.

U┼╝ywamy hooka React.useState do przechowywania stanu naszego elementu (widoczny lub ukryty).
Domy┼Ťlnie element┬ájest ukryty. Aby zmieni─ç jego widoczno┼Ť─ç, tworzymy dwa przyciski, kt├│re po klikni─Öciu┬áwywo┼éuj─ů┬áfunkcj─Ö setVisible┬ázmieniaj─ůc argument visible na┬áwarto┼Ť─ç┬átrue┬á(aby nasz element by┼é widoczny) lub false┬á(aby go ukry─ç).

Praktyczny przykład:

// ONLINE-RUNNER:browser;

// import React from 'react';

const App = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <div>
      <button onClick={() => setVisible(true)}>Wy┼Ťwietl</button>
      <button onClick={() => setVisible(false)}>Ukryj</button>
      {visible && <div>M├│j element</div>}
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

ReactJS (PL)

React - jak wy┼Ťwietli─ç lub ukry─ç element?
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join