Как компоненту понять что переменная была перезаписана с другого компонента

Question

Есть компонент App в нем лежит переменная test с пустым значением я передаю его в качестве props в компонент Test в этом компоненте по клику на кнопку меняю значение переменной test на значение 'hello world!', но как понять компоненту App что переменная была перезаписана?

export default function App() {
  let test = '';
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Test test={test} />
    </div>
  );
}


export default function Test({ test }) {
  function changeTest() {
    test = 'hello world!';
  }

  return (
    <button onClick={() => changeTest()}>Click</button>
  )
}

Answer 1

С ReactJS никогда не работал (с javascript знаком только месяц XD), посидел поискал статьи по этому поводу и нашел аналог этой задачи. Изменил его под ваши требования. Вот код:

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { test: "" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({ test: "hello world!" });
  }

  render() {
    return (
      <div>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <p>{this.state.test}</p>
        <button onClick={this.handleClick}>Click here!</button>
      </div>
    );
  }
}

export default App;

Надеюсь это то что вам нужно.

БЛОГ НА HUSL

Как компоненту понять что переменная была перезаписана с другого компонента

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