如何使用与组件反应来隐藏我的 div？

Question

I have this code for the App :

import React, {Component} from 'react';
import App1 from './App1';

class App extends Component {
    render(){
        return (
                    <>
                        <App1/>
                        <div>
                        <h1>Hello</h1>
                        </div>
                    </>
                );
        }
}

export default App;

And this code is for the App1

import React, {Component} from 'react';

class App1 extends Component {
    render() {
        return (
                    <>
                    <button>Hide</button>
                    </>
                );
    }
}

export default App1;

I would like when I click on the Button to hide my div which displays "Hello". But I have no idea to do this ?

Could you help me please ?

Thank you very much !

Answer 1

You can hide the div in the parent component ie (App.js) by using props. So here are the steps you need to follow:

1. create a function named as handleHide in App component, and pass it as a prop to App1 component.
2. Define a state named as hide in App component and pass it as a prop in App1 component.
3. Inside App1 component use the hide prop to change the text of button(it's bonus).
4. Assign handleHide function passed as prop from App to App1 component's button element's onClick .

Here are the files: App.js

import React, { Component } from "react";
import App1 from "./App1";

class App extends Component {
  state = {
    hide: false
  };
  handleHide = () => {
    this.setState({ hide: !this.state.hide });
  };
  render() {
    return (
      <>
        <App1 handleHide={this.handleHide} hide={this.state.hide} />
        <div>{!this.state.hide && <h1>Hello</h1>}</div>
      </>
   );
  }
}
export default App;

And App1.js will be:

import React, { Component } from "react";

class App1 extends Component {
  render() {
    return (
      <>
        <button onClick={this.props.handleHide}>
          {this.props.hide ? "Show" : "Hide"}
        </button>
      </>
    );
  }
}

export default App1;

You can see the full working code here .

Answer 2

You create a state in App.js and pass those state down to App1.js , which look like this

 class App extends Component { constructor(){ super(); this.state = { hidden: false }; this.changeHiddenStatus = this.changeHiddenStatus.bind(this) } changeHiddenStatus = () => { this.setState(state => ({ hidden: !state.hidden })) } render(){ return ( <> <App1 handleClick={this.changeHiddenStatus}/> <div> <h1>Hello</h1> </div> </> ); } }

And then in the App1.js you did this

 class App1 extends Component { render() { return ( <> <button onClick={props.handleClick}>Hide</button> </> ); } }

These are some basic React stuff, so if you don't get it I suggest you should read the React doc again.

Answer 3

Using class component is perfectly fine. You can use functional component to use react hooks it makes your code more readable and less code.

App.js

import React, { useState } from "react";
import App1 from "./App1";
export default function App() {
  const [show, setShow] = useState(true);
  return (
    <>
      <App1 setShow={setShow} show={show} />
       <div>{show && <h1>Hello</h1>}</div>
    </>
  );
}

App1.js

import React from "react";

export default function App1({ setShow, show }) {
  return (
    <>
      <button onClick={() => setShow(!show)}>{show ? "Hide" : "Show"}</button>
    </>
  );
}