Передача данных из функции в div (React)

Question

При нажатии на кнопку не отображается на экране значение переменной p1. Код на Typescript.

//компонент Main
export function Main() {

  //переменные
  let p1;
  let p2: any = "1";
  let a = 2, b = 2;

  //функция
  function f(){
    if (a == b) {p1 = p2}
  }

  //содержимое (кнопка и отображаемые данные)
  return(
    <div>
      <button className='next' id='next' onClick={f}>Test</button>
      {p1}
    </div>
  );

}

export default Main;

Answer 1

При нажатии на кнопку не отображается на экране значение переменной p1

Так и должно быть. Поскольку не выполняется твое условие

if (a == b)

Так же еще нужно помнить что рендер компонента вызывается

изменением стейта
изменением пропсов

Ни того, ни другого в твоем компоненте нет.

Запускай мой пример, жми на кнопку и смотри в консоль...

ReactDOM.render(<Main />, document.querySelector('#root'))

function Main() {
  const [p1, setP1] = React.useState(null)
  //переменные
  /*let p1;*/
  let p2 = "1";
  let a = 2, b = 2;
  function f(){
    if (a == b) setP1(p2)
  }
  /*
  //функция
  function f(){
    console.log('Смотри входные данные', a, b, a == b)
    if (a == b) {p1 = p2}
    console.log('Смотри p1', p1)
  }
  */

  //содержимое (кнопка и отображаемые данные)
  return(
    <div>
      <button className='next' id='next' onClick={f}>Test</button>
      <p>{p1}</p>
    </div>
  );

}

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>


<div id="root"></div>

БЛОГ НА HUSL

Передача данных из функции в div (React)

Ответы (1 шт):