Как изменить компонент внутри рендера одним нажатием кнопки?

Question

Я новичок в программировании, особенно в ReactJS. На самом деле я столкнулся с проблемой.

Я просто хочу сменить страницу. Как бы просто это не звучало для меня, это 2-дневный Google-Search-Nothing-Found-Adventure без веселья.

Я создал компонент с именем <Frontpage /> Он отображается в самом начале, но я хочу изменить егос помощью нажатия на кнопку.

Это мой код:

import React from 'react';
import './App.css';
import Frontpage from './Frontpage'
import Question from './components/Question'


class App extends React.Component {
  constructor() {
    super()
    this.state = {
      showComponent: true,
    }
  }

  handleClick() {
    if (this.state.showComponent) {
      return <Question />
    } else {
      console.log("Something went wrong!")
    }
    // console.log("The button was clicked!")
    // document.getElementById('page')
    // document.getElementsByClassName('App-Header')
  }

  render() {

    return (
        <div className="App">
          <header className="App-header">
            <div id="page">
              <Frontpage />
            </div>
              <button id="button" onClick={this.handleClick}>Los geht's</button>
          </header>
        </div>
    );
  }
}


export default App;

Когда я нажимаю на него, он всегда говорит: "TypeError: Невозможно прочитать свойство 'состояние' из неопределенного"

Я много пробовал, но ничего не получалось.

Answer 1

Попробуйте что-нибудь подобное. Измените вашу handleClick функцию на функцию стрелки и визуализируйте компонент на основе состояния.

Обновление : обратите внимание, что я использовал Fragment, чтобы обернуть элементы / компоненты button и Question

import React,{Fragment} from 'react';
import './App.css';
import Frontpage from './Frontpage'
import Question from './components/Question'


class App extends React.Component {
  constructor() {
    super()
    this.state = {
      showComponent: false,
    }
  }

  handleClick =()=> {
     this.setState({showComponent:true})
  }

  render() {

    return (
        <div className="App">
          <header className="App-header">
            <div id="page">
              {this.state.showComponent? <Fragment><Question /><button id="button" onClick={this.handleClick}>Los geht's</button></Fragment> : <Frontpage /> }
            </div>
          </header>
        </div>
    );
  }
}


export default App;

Answer 2

import React from 'react';
import './App.css';
import Frontpage from './Frontpage'
import Question from './components/Question'


class App extends React.Component {
  constructor() {
    super()
    // Start with a hide component
    this.state = {
      showComponent: false,
    }
    //  Binding your function
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    const { showComponent } = this.state;
    // Use state to trigger a re-render
    this.setState({
      showComponent: !showComponent;
    })
  }

  render() {
    const { showComponent } = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <div id="page">
            {
              // Conditionally render a component
              showComponent
              ? (<Question />)
              : (<Frontpage />)
            }
          </div>
          <button id="button" onClick={this.handleClick}>Los get's</button>
        </header>
      </div>
    );
  }
}


export default App;

Answer 3

Во-первых, вам нужно привязать свой клик на ручке или использовать функцию стрелки, как handleClick = () => {}

Во-вторых, для навигации используйте реакции-маршрутизатор

Answer 4

Вы должны привязать handleClick к вашему class component или в другом случае использовать функцию стрелки: Чтобы связать метод внизу вашего state внутри добавления constructorthis:

this.handleClick = this.handleClick.bind(this);

Для использования функции arrow измените синтаксис вашего метода следующим образом:

this.handleClick = () => {
    if (this.state.showComponent) {
      return <Question />
    } else {
      console.log("Something went wrong!")
    }
  }

Answer 5

Попробуйте это.

import Question from './components/Question'


class App extends React.Component {
  constructor() {
    super()
    this.state = {
      showComponent: true,
    }
  }

  handleClick() {
    this.setState({ showComponent: true });
  }

  render() {
    const { showComponent } = this.state;
    return (
        <div className="App">
          <header className="App-header">
            <div id="page">
              <Frontpage />
            </div>
            { showComponent ? <Question /> : null }
              <button id="button" onClick={this.handleClick.bind(this)}>Los geht's</button>
          </header>
        </div>
    );
  }
}

export default App;