如何在反应js中隐藏和显示一个div

Question

我知道这个问题被问了很多，但我不太明白答案，主要是因为所有答案都使用“类”，而且我被教导使用 function。 我什至不明白其中的区别，但每次我尝试使用 class 组件时，都没有任何效果。

我对 React.js 真的很陌生，我很难理解它是如何工作的。

我需要显示和隐藏- <p className='service_explication more'>{props.more}</p> -点击带有平滑 animation 的按钮。 我已经尝试过基本的 javascript 但它不起作用。 我已经尝试了很多东西，现在我被卡住了，我找不到一个很好的解释来解释我需要什么。

请你帮助我好吗？ 我真的很想学习，但我很难过。

非常感谢你的帮助。

import React, { useState } from 'react';
import '../assets/Section.scss';
import '../assets/Services.scss';

function Services(){




      function showMore(event){




    }

    const BlocService = (props) => {
    return <div className='service_sub_container'>
        <h1 className='service_name'>{props.name}</h1>
        <p className='service_explication'>{props.explication}</p>
        <p className='service_explication more'>{props.more}</p>
        <button onClik={showMore}>Plus</button>    
    </div>
    }




    return (

        <>
        <div className='main_container'>
            <div className='section_container'>
                <div className='title_intro_container'>
                    <h1 className='section_title'>Nos Services</h1>
                    <p className='section_intro'>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.</p>
                 </div>

                <div className='service_container'>
                    <BlocService name={'Développeur Front/Web'} explication={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
                    <BlocService name={'Lead developper'} explication={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
                    <BlocService name={'Architectes Front-end'} explication={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
                    <BlocService name={'Développeur Front/Web'} explication={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
                </div>
            </div>
        </div>

        </>

    );
}

export default Services;```

Answer 1

首先，不要心疼问，每个人都要从底层学习。

Reactjs 以动态方式“渲染”网页，因此您有 2 个选项，具体取决于您想要平滑的 animation 还是只是默认的显示/隐藏。

1. 如果您想以一种简单的方式显示，您可以创建一个允许创建或不创建所需 div 的条件

   function Component() { const [showed, setShowed] = useState(false) return ( <div> <button onClick={()=>setShowed(!showed)}>Show/Hide</button> {showed && <div>HELLO</div>} </div> ) }

2. 如果你想创建流畅的动画，你可能需要类。 使用 React，您可以毫无问题地添加或删除类，让 css 完成这项工作，因此您可以

   function Component() { const [showed, setShowed] = useState(false) return ( <div> <button onClick={()=>setShowed(?showed)}>Show/Hide</button> <div className={showed:classShowed:classHided>HELLO</div> </div> ) }

   我希望这可以帮助你

Answer 2

在功能组件中，您将通过 react 提供的useState挂钩控制 state。

import React, {useState} from 'react'

function() services {

    const [show, toggleText] = useState(false)

    return (
        <div>
            <h2>Header text</h2>
            <button onClick={toggleText(!show)}>Toggle text button</button>
            {show && (<p>Text to toggle</p>)}
        </div>
    )

}

反应文档

Answer 3

一切都可以在 BlocService 组件内完成。 使用 state 和条件渲染：

import React, {useState} from 'react'

const BlocService = (props) => {
    const [more, setMore] = useState(false);

    const showMore = () => {
        setMore(!more);
    }

    return (
        <div className='service_sub_container'>
            <h1 className='service_name'>{props.name}</h1>
            <p className='service_explication'>{props.explication}</p>
            {more && <p className='service_explication more'>{props.more}</p>}
            <button onClick={showMore}>Plus</button>    
        </div>
    )
}

export default BlocService;

您还必须从Services中删除showMore