Достижение метода класса (функция внутри класса) в React

Question

все. Я пытаюсь написать простую программу, которая заставит слово «Привет» появиться на экране. Вот код

import React from 'react';
import ReactDOM from 'react-dom';

class Button extends React.Component {
    Hi = () => {
        return <h1>Hi</h1>
    }
    state = {
        showSayHi: false
    }
    sayHi = () => {                                                    
        this.setState({                                               
            showSayHi: true
        }) ;                                                                          
    }  
    render() {
        const { showSayHi } = this.state;       
        return (
            <div>
               {this.state.showSayHi ? Hi() : null}
                <button type="submit" onClick={this.sayHi}>Press me</button>
            </div>
        )
    }
}
export default Button;
ReactDOM.render(<Button />, document.getElementById('root'));

Существует версия, что функция Hi не определена глобально, но я не знаю, как определить функцию глобально. Проблема, кажется, заключается в функции Hi или в ее вызове внутри троичного оператора. Может кто-нибудь, пожалуйста, помогите мне заставить эту вещь работать?

Answer 1

Похоже, вы забыли это.

Здесь:

{this.state.showSayHi ? this.Hi() : null}

Answer 2

Существует еще одно решение от этого

Вы можете оставить Hi () без этого:

{this.state.showSayHi ? Hi() : null}

Но, чтобы сохранить его таким, Вы должны вывести функцию Hi () из класса. Например:

const Hi = () => {
    return <h1>Hi</h1>
}

class Button extends React.Component {
state = {
    showSayHi: false
}
sayHi = () => {                                                    
    this.setState({                                               
        showSayHi: true
    }) ;                                                                          
}  
render() {
    const { showSayHi } = this.state;       
    return (
        <div>
           {this.state.showSayHi ? Hi() : null}
            <button type="submit" onClick={this.sayHi}>Press me</button>
        </div>
    )
}

Я не призываю вас сделать это (если вы не хотите использовать также функцию Hi () вне класса). Я просто хочу показать вам, что это решение также работает. Если вы сравните его с предыдущим решением , вы поймете, как слово this работает в классе.

Answer 3

Если все, что вы пытаетесь сделать, это чтобы на экране появилось «Привет», нет необходимости в двух компонентах:

export default class App extends Component {
  state = { showHi: false };

  showHi = () => this.setState({ showHi: !this.state.showHi });

  render() {
    return (
      <div>
        <div>
          {this.state.showHi ? 'Hi' : null}
          <button onClick={this.showHi}>Toggle Hi</button>
        </div>
      </div>
    );
  }
}

Answer 4

Пожалуйста, сделайте это this.Hi () в this.state.showSayHi? Привет (): ноль

Answer 5

Вы можете получить доступ к вашим методам this.methodName внутри компонентов класса. {this.state.showSayHi ? this.Hi() : null}

Определить Hi как функциональный компонент.

function Hi(props) {
  return(
    <h1>Hi !</h1>
  )
}

Чтобы использовать этот компонент глобально, переместите этот код в файл и затем импортируйте Hi, экспортировав этот код из файла.