Реакция компонента не обновляется после события onClick

Question

У меня есть функциональный компонент реагировать с машинописью, который получает обработчик щелчка, который корректно срабатывает, однако компонент не обновляется после click event.

т.е:

// for reasons out of the scope of this question, 
// this component should be functional

const Heroes: React.SFC<{}> = () => {
  // for fututre reasons, these variables must leave within this component
  const thor = "isHero";
  const hulk = "isHero";

  function appendSpan() {
    console.log(thor === hulk);
    return thor === hulk ? <span>yes</span> : <span>no</span>;
  }

  return <p onClick={appendSpan}>Are they both heroes?</p>;
};

function App() {
  return (
    <div className="App">
      <Heroes />
    </div>
  );
}

Если бы я немедленно вызвал метод, т.е. <p>Are they both heroes? {appendSpan()}</p>

<span> добавляется соответствующим образом, однако, это не относится к сценарию onClick.

Не могли бы вы помочь мне понять, что мне здесь не хватает?

Вот песочница с кодом

Answer 1

Возвращение из функции appendSpan должно быть частью того, что вы возвращаете в функции рендеринга.

Вы можете сохранить состояние компонента приложения и написать функцию onClick, которая изменяет состояние. Передайте onClick и состояние компоненту Heroes в качестве реквизита. В зависимости от состояния, которое вы получили от реквизита, решите, что делать.

React не будет "реагировать" на переменные класса, я вижу, вы хотите сохранить состояние в классе. Попробуйте поискать крючки

Answer 2

Вместо этого вы можете изменить компонент Heroes на компонент с отслеживанием состояния и обновить состояние по щелчку или использовать Хуки

Обновление для TSX

class Heroes extends React.Component <{}, any> {
    // for fututre reasons, these variables must leave within this component
    private thor = "isHero";
    private hulk = "isHero";

    constructor(props) {
      super(props);
      this.state = {
        showButton: false
      };
    }

    appendSpan() {
      // update the state to show the button
      this.setState({
        showButton: true
      });
    }

    render() {
      const { showButton } = this.state;
      let button = this.thor === this.hulk ? <span> yes </span> : <span>no</span > ;
      return ( <p onClick={() => this.appendSpan()}> Are they both heroes ? 
        { showButton ? button : '' } 
        </p>);
      }
}

function App() {
  return ( <div className = "App" >
      <Heroes/>
    </div>
  );
}

Еще одно обновление с реакцией Крючки , представленные в React v16.8.0-alpha.0

// import useState hooks
import { useState } from 'react';

const Heroes: React.SFC<any> = () => {
  // for fututre reasons, these variables must leave within this component
  const thor = "isHero";
  const hulk = "isHero";
  
  // declare a new state variable flag and the update function setFlag
  const [flag, setFlag] = useState(false);
  
  let button = thor === hulk ? <span> yes </span> : <span> no </span >;

  return (<p onClick={() => setFlag(true)}>Are they both heroes?
    {flag ? button : ''}
  </p>);
};

function App() {
  return (
    <div className="App">
      <Heroes />
    </div>
  );
}

создал песочницу здесь для реализации с реагирующими хуками.

Answer 3

Потому что ваш .appendSpan() возвращает реагирует dom, но возвращается в контексте события onClick.

Когда вы говорите <p>Are they both heroes? {appendSpan()}</p>, вы фактически указываете приложению добавить диапазон внутри тега <p> ...

Но onClick={appendSpan}, где вы говорите, чтобы добавить? Вы не сказали, куда добавить. Так что он никогда не будет добавлен в дерево DOM