แสดงหรือซ่อนองค์ประกอบในการตอบสนอง

ฉันยุ่งกับ React.js เป็นครั้งแรกและไม่สามารถหาวิธีแสดงหรือซ่อนบางสิ่งบางอย่างบนหน้าเว็บผ่านเหตุการณ์การคลิก ฉันไม่ได้โหลดไลบรารี่อื่น ๆ ไปที่หน้าดังนั้นฉันกำลังมองหาวิธีดั้งเดิมในการใช้ไลบรารี่ React นี่คือสิ่งที่ฉันมี ฉันต้องการแสดง div ผลลัพธ์เมื่อเหตุการณ์การคลิกเกิดขึ้น

var Search= React.createClass({
    handleClick: function (event) {
        console.log(this.prop);
    },
    render: function () {
        return (
            <div className="date-range">
                <input type="submit" value="Search" onClick={this.handleClick} />
            </div>
        );
    }
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search /> , document.body);

ตอบสนองประมาณปี 2020

ในการonClickเรียกกลับให้เรียกฟังก์ชัน setter ของ state hookเพื่ออัพเดตสถานะและแสดงผลอีกครั้ง:

const Search = () => {
  const [showResults, setShowResults] = React.useState(false)
  const onClick = () => setShowResults(true)
  return (
    <div>
      <input type="submit" value="Search" onClick={onClick} />
      { showResults ? <Results /> : null }
    </div>
  )
}

const Results = () => (
  <div id="results" className="search-results">
    Some Results
  </div>
)

ReactDOM.render(<Search />, document.querySelector("#container"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JSFiddle

ตอบสนองประมาณปี 2014

setStateกุญแจสำคัญคือการอัปเดตสถานะขององค์ประกอบในการจัดการการคลิกโดยใช้ เมื่อการเปลี่ยนแปลงสถานะถูกนำไปใช้renderวิธีการจะถูกเรียกอีกครั้งด้วยสถานะใหม่:

var Search = React.createClass({
    getInitialState: function() {
        return { showResults: false };
    },
    onClick: function() {
        this.setState({ showResults: true });
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                { this.state.showResults ? <Results /> : null }
            </div>
        );
    }
});

var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

ReactDOM.render( <Search /> , document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JSFiddle

<style type="text/css">
    .hidden { display:none; }
</style>

render: function() {
    return (
      <div className={this.props.shouldHide ? 'hidden' : ''}>
        This will be hidden if you set <tt>props.shouldHide</tt> 
        to something truthy.
      </div>
    );
}

// or in more modern JS and stateless react
const Example = props => <div className={props.shouldHide}/>Hello</div>

นี่คือไวยากรณ์ทางเลือกสำหรับผู้ประกอบการที่ประกอบไปด้วย:

{ this.state.showMyComponent ? <MyComponent /> : null }

เทียบเท่ากับ:

{ this.state.showMyComponent && <MyComponent /> }

ยันทำไม

ยังมีไวยากรณ์ทางเลือกด้วย display: 'none';

<MyComponent style={this.state.showMyComponent ? {} : { display: 'none' }} />

อย่างไรก็ตามหากคุณใช้มากเกินไปdisplay: 'none'สิ่งนี้จะนำไปสู่มลภาวะ DOM และทำให้ใบสมัครของคุณช้าลงในที่สุด

นี่คือแนวทางของฉัน

import React, { useState } from 'react';

function ToggleBox({ title, children }) {
  const [isOpened, setIsOpened] = useState(false);

  function toggle() {
    setIsOpened(wasOpened => !wasOpened);
  }

  return (
    <div className="box">
      <div className="boxTitle" onClick={toggle}>
        {title}
      </div>
      {isOpened && (
        <div className="boxContent">
          {children}
        </div>
      )}
    </div>
  );
}

ในรหัสด้านบนเพื่อให้บรรลุนี้ฉันใช้รหัสเช่น:

{opened && <SomeElement />}

ที่จะทำให้ SomeElementเฉพาะในกรณีที่openedเป็นจริง มันทำงานได้เนื่องจากวิธีที่ JavaScript แก้ไขเงื่อนไขเชิงตรรกะ:

true && true && 2; // will output 2
true && false && 2; // will output false
true && 'some string'; // will output 'some string'
opened && <SomeElement />; // will output SomeElement if `opened` is true, will output false otherwise (and false will be ignored by react during rendering)
// be careful with 'falsy' values eg
const someValue = 0;
someValue && <SomeElement /> // will output 0, which will be rednered by react
// it'll be better to:
!!someValue && <SomeElement /> // will render nothing as we cast the value to boolean

เหตุผลในการใช้วิธีนี้แทน CSS 'display: none';

• ในขณะที่มันอาจ 'ถูกกว่า' ในการซ่อนองค์ประกอบด้วย CSS - ในกรณีเช่นนี้องค์ประกอบ 'ที่ซ่อนอยู่' ยังคงมีชีวิตอยู่ในโลกที่ตอบโต้ (ซึ่งอาจทำให้มันแพงกว่า)
  • หมายความว่าหากอุปกรณ์ประกอบฉากขององค์ประกอบหลัก (เช่น <TabView> ) จะเปลี่ยน - แม้ว่าคุณจะเห็นเพียงหนึ่งแท็บแท็บทั้ง 5 แท็บจะได้รับการแสดงผลอีกครั้ง
  • องค์ประกอบที่ซ่อนอยู่อาจยังคงมีวิธีการใช้งานรอบการทำงานบางอย่างเช่น มันอาจดึงข้อมูลบางอย่างจากเซิร์ฟเวอร์หลังจากอัพเดททุกครั้งแม้จะมองไม่เห็นก็ตาม
  • องค์ประกอบที่ซ่อนอยู่อาจทำให้แอปเสียหายหากได้รับข้อมูลที่ไม่ถูกต้อง อาจเกิดขึ้นเนื่องจากคุณสามารถ 'ลืม' เกี่ยวกับโหนดที่มองไม่เห็นเมื่อทำการอัพเดตสถานะ
  • คุณอาจตั้งค่ารูปแบบ 'แสดง' ผิดเมื่อทำการมองเห็นองค์ประกอบเช่น div บางอันคือ 'display: flex' โดยค่าเริ่มต้น แต่คุณจะตั้ง 'display: block' โดยไม่ได้ตั้งใจdisplay: invisible ? 'block' : 'none'ซึ่งอาจทำให้เลย์เอาต์เสียหาย
  • การใช้someBoolean && <SomeNode />นั้นง่ายมากที่จะเข้าใจและมีเหตุผลโดยเฉพาะอย่างยิ่งถ้าตรรกะของคุณเกี่ยวข้องกับการแสดงบางอย่างหรือไม่ซับซ้อน
  • ในหลายกรณีคุณต้องการสถานะองค์ประกอบ 'รีเซ็ต' เมื่อปรากฏขึ้นอีกครั้ง เช่น. คุณอาจมีแถบเลื่อนที่คุณต้องการตั้งค่าเป็นตำแหน่งเริ่มต้นทุกครั้งที่แสดง (ถ้าเป็นพฤติกรรมที่ต้องการรักษาสถานะองค์ประกอบก่อนหน้าแม้ว่ามันจะถูกซ่อนไว้ซึ่ง IMO หายาก - แน่นอนฉันจะใช้ CSS ถ้าจำสถานะนี้ในลักษณะที่แตกต่างกันจะซับซ้อน)

ด้วยเวอร์ชั่นใหม่ล่าสุดจะตอบสนอง 0.11 คุณก็สามารถคืนค่า Null ให้ไม่มีการแสดงเนื้อหาได้

เรนเดอร์เป็นโมฆะ

ฉันสร้างส่วนประกอบเล็ก ๆ ที่จัดการสิ่งนี้ให้คุณ: react-toggle-display

มันกำหนดคุณลักษณะของรูปแบบให้เป็นไปdisplay: none !importantตามhideหรือshowอุปกรณ์ประกอบฉาก

ตัวอย่างการใช้งาน:

var ToggleDisplay = require('react-toggle-display');

var Search = React.createClass({
    getInitialState: function() {
        return { showResults: false };
    },
    onClick: function() {
        this.setState({ showResults: true });
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                <ToggleDisplay show={this.state.showResults}>
                    <Results />
                </ToggleDisplay>
            </div>
        );
    }
});

var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search />, document.body);

มีคำตอบที่ยอดเยี่ยมหลายคำอยู่แล้ว แต่ฉันไม่คิดว่าพวกเขาได้รับการอธิบายที่ดีมากและวิธีการหลายอย่างที่ให้ไว้มี gotchas บางอย่างที่อาจทำให้คนเดินทาง ดังนั้นฉันจะไปสามวิธีหลัก (บวกหนึ่งตัวเลือกนอกหัวข้อ) เพื่อทำสิ่งนี้และอธิบายข้อดีข้อเสีย ฉันมักจะเขียนสิ่งนี้เพราะแนะนำให้ใช้ตัวเลือกที่ 1 มากและมีปัญหาที่อาจเกิดขึ้นกับตัวเลือกนั้นหากไม่ได้ใช้อย่างถูกต้อง

ตัวเลือก 1: การแสดงผลตามเงื่อนไขในพาเรนต์

ฉันไม่ชอบวิธีนี้เว้นแต่คุณจะแสดงองค์ประกอบเพียงครั้งเดียวแล้วปล่อยไว้ที่นั่น ปัญหาคือมันจะทำให้เกิดปฏิกิริยาตอบสนองในการสร้างองค์ประกอบตั้งแต่เริ่มต้นทุกครั้งที่คุณสลับการมองเห็น นี่คือตัวอย่าง LogoutButton หรือ LoginButton แสดงผลแบบมีเงื่อนไขใน LoginControl หลัก หากคุณเรียกใช้สิ่งนี้คุณจะสังเกตเห็นว่าตัวสร้างกำลังถูกเรียกใช้ในการคลิกแต่ละปุ่ม https://codepen.io/Kelnor/pen/LzPdpN?editors=1111

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;

    let button = null;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

class LogoutButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created logout button');
  }
  render(){
    return (
      <button onClick={this.props.onClick}>
        Logout
      </button>
    );
  }
}

class LoginButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created login button');
  }
  render(){
    return (
      <button onClick={this.props.onClick}>
        Login
      </button>
    );
  }
}

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

ตอนนี้ React ค่อนข้างเร็วในการสร้างส่วนประกอบตั้งแต่เริ่มต้น อย่างไรก็ตามมันยังคงมีการเรียกรหัสของคุณเมื่อสร้างมัน ดังนั้นถ้าคอนสตรัคเตอร์ componentDidMount, render, ฯลฯ โค้ดของคุณมีราคาแพงมันจะช้าลงอย่างมากในการแสดงส่วนประกอบ นอกจากนี้ยังหมายความว่าคุณไม่สามารถใช้สิ่งนี้กับส่วนประกอบที่เป็นสถานะที่คุณต้องการให้สถานะถูกเก็บรักษาไว้เมื่อถูกซ่อน (และเรียกคืนเมื่อแสดง) ข้อดีอย่างหนึ่งคือส่วนประกอบที่ซ่อนไม่ได้ถูกสร้างขึ้นจนกว่าจะถูกเลือก ดังนั้นส่วนประกอบที่ซ่อนไว้จะไม่ทำให้การโหลดหน้าเริ่มต้นของคุณล่าช้า อาจมีบางกรณีที่คุณต้องการให้องค์ประกอบที่เป็นสถานะที่จะรีเซ็ตเมื่อสลับ ในกรณีนี้นี่คือตัวเลือกที่ดีที่สุดของคุณ

ตัวเลือกที่ 2: การแสดงผลแบบมีเงื่อนไขในเด็ก

สิ่งนี้จะสร้างองค์ประกอบทั้งสองครั้ง จากนั้นทำให้วงจรการแสดงผลส่วนที่เหลือสั้นลงหากส่วนประกอบถูกซ่อน นอกจากนี้คุณยังสามารถลัดวงจรตรรกะอื่น ๆ ในวิธีอื่น ๆ โดยใช้เสาที่มองเห็นได้ สังเกตเห็น console.log ในหน้า codepen https://codepen.io/Kelnor/pen/YrKaWZ?editors=0011

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        <LoginButton isLoggedIn={isLoggedIn} onClick={this.handleLoginClick}/>
        <LogoutButton isLoggedIn={isLoggedIn} onClick={this.handleLogoutClick}/>
      </div>
    );
  }
}

class LogoutButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created logout button');
  }
  render(){
    if(!this.props.isLoggedIn){
      return null;
    }
    return (
      <button onClick={this.props.onClick}>
        Logout
      </button>
    );
  }
}

class LoginButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created login button');
  }
  render(){
    if(this.props.isLoggedIn){
      return null;
    }
    return (
      <button onClick={this.props.onClick}>
        Login
      </button>
    );
  }
}

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

ทีนี้ถ้าตรรกะการเริ่มต้นรวดเร็วและลูกนั้นไร้สัญชาติคุณจะไม่เห็นความแตกต่างด้านประสิทธิภาพหรือฟังก์ชั่น อย่างไรก็ตามทำไมให้ React สร้างส่วนประกอบใหม่ทุกครั้งที่เปิดใช้งาน หากการเตรียมใช้งานมีราคาแพงอย่างไรก็ตามตัวเลือก 1 จะเรียกใช้ทุกครั้งที่คุณสลับส่วนประกอบซึ่งจะทำให้หน้าช้าลงเมื่อสลับ ตัวเลือกที่ 2 จะเรียกใช้ส่วนประกอบทั้งหมดในการโหลดหน้าแรก ชะลอการโหลดครั้งแรก ควรทราบอีกครั้ง หากคุณเพิ่งแสดงองค์ประกอบเพียงครั้งเดียวตามเงื่อนไขและไม่เปิดใช้งานหรือคุณต้องการรีเซ็ตเมื่อเปิดใช้งานตัวเลือกที่ 1 นั้นใช้ได้และอาจเป็นตัวเลือกที่ดีที่สุด

หากการโหลดหน้าเว็บช้าเป็นปัญหาแสดงว่าคุณมีรหัสราคาแพงในวิธีการใช้รอบการทำงานและโดยทั่วไปก็ไม่ใช่ความคิดที่ดี คุณสามารถและควรแก้ปัญหาการโหลดหน้าเว็บช้าโดยการย้ายรหัสราคาแพงออกจากวิธีวงจรชีวิต ย้ายไปยังฟังก์ชัน async ที่ kicked off โดย ComponentDidMount และให้การเรียกกลับวางไว้ในตัวแปรสถานะด้วย setState () หากตัวแปรสถานะเป็นโมฆะและส่วนประกอบนั้นสามารถมองเห็นได้แล้วให้ฟังก์ชั่นการแสดงผลคืนตัวยึด มิฉะนั้นแสดงข้อมูล วิธีนี้หน้าจะโหลดอย่างรวดเร็วและเติมแท็บขณะที่โหลด นอกจากนี้คุณยังสามารถย้ายตรรกะไปที่ผู้ปกครองและผลักดันผลลัพธ์ไปยังเด็ก ๆ เป็นอุปกรณ์ประกอบฉาก วิธีนี้คุณสามารถจัดลำดับความสำคัญของแท็บที่โหลดก่อน หรือแคชผลลัพธ์และรันเฉพาะตรรกะในครั้งแรกที่ส่วนประกอบถูกแสดง

ตัวเลือก 3: การซ่อนคลาส

การซ่อนคลาสน่าจะเป็นวิธีที่ง่ายที่สุด ดังที่ได้กล่าวไว้คุณเพียงแค่สร้างคลาส CSS พร้อมจอแสดงผล: ไม่มีและกำหนดคลาสตามเสา ข้อเสียคือรหัสทั้งหมดของทุกองค์ประกอบที่ซ่อนอยู่เรียกว่าและส่วนประกอบที่ซ่อนอยู่ทั้งหมดจะแนบกับ DOM (ตัวเลือกที่ 1 ไม่ได้สร้างส่วนประกอบที่ซ่อนอยู่เลยและตัวเลือกที่ 2 ไม่จำเป็นต้องใช้รหัสลัดเมื่อส่วนประกอบถูกซ่อนและเอาส่วนประกอบออกจาก DOM ทั้งหมด) ดูเหมือนว่านี่จะเร็วกว่าในการสลับการมองเห็นตามการทดสอบบางอย่าง คำตอบอื่น ๆ แต่ฉันไม่สามารถพูดได้

ตัวเลือก 4: องค์ประกอบเดียว แต่เปลี่ยนอุปกรณ์ประกอบฉาก หรืออาจจะไม่มีส่วนประกอบเลยและแคช HTML

อันนี้จะไม่ทำงานสำหรับทุกแอปพลิเคชันและเป็นหัวข้อที่ปิดเพราะมันไม่ได้เกี่ยวกับการซ่อนส่วนประกอบ แต่มันอาจเป็นทางออกที่ดีกว่าสำหรับการใช้งานบางกรณีมากกว่าการซ่อน สมมติว่าคุณมีแท็บ อาจเป็นไปได้ที่จะเขียนหนึ่งองค์ประกอบการเกิดปฏิกิริยาและเพียงแค่ใช้อุปกรณ์ประกอบฉากเพื่อเปลี่ยนสิ่งที่ปรากฏในแท็บ คุณสามารถบันทึก JSX เพื่อระบุตัวแปรและใช้ prop เพื่อตัดสินใจว่า JSX ใดที่จะกลับมาในฟังก์ชั่นการแสดงผล หากต้องสร้าง JSX ให้ทำและแคชในพาเรนต์และส่งอันที่ถูกต้องเป็นเสา หรือสร้างในเด็กและแคชไว้ในสถานะของเด็กและใช้อุปกรณ์ประกอบฉากเพื่อเลือกหนึ่งที่ใช้งานอยู่

นี่เป็นวิธีที่ดีในการใช้งาน DOM เสมือน :

class Toggle extends React.Component {
  state = {
    show: true,
  }

  toggle = () => this.setState((currentState) => ({show: !currentState.show}));

  render() {
    return (
      <div>
        <button onClick={this.toggle}>
          toggle: {this.state.show ? 'show' : 'hide'}
        </button>    
        {this.state.show && <div>Hi there</div>}
      </div>
     );
  }
}

ตัวอย่างที่นี่

ใช้ React hooks:

const Toggle = () => {
  const [show, toggleShow] = React.useState(true);

  return (
    <div>
      <button
        onClick={() => toggleShow(!show)}
      >
        toggle: {show ? 'show' : 'hide'}
      </button>    
      {show && <div>Hi there</div>}
    </div>
  )
}

ตัวอย่างที่นี่

คุณตั้งค่าบูลีนในสถานะ (เช่น 'แสดง)' แล้วทำดังนี้:

var style = {};
if (!this.state.show) {
  style.display = 'none'
}

return <div style={style}>...</div>

แนวปฏิบัติที่ดีที่สุดอยู่ด้านล่างตามเอกสาร:

{this.state.showFooter && <Footer />}

แสดงองค์ประกอบเฉพาะเมื่อสถานะนั้นถูกต้อง

class Toggle extends React.Component {
  state = {
    show: true,
  }

  render() {
    const {show} = this.state;
    return (
      <div>
        <button onClick={()=> this.setState({show: !show })}>
          toggle: {show ? 'show' : 'hide'}
        </button>    
        {show && <div>Hi there</div>}
      </div>
     );
  }
}

   class FormPage extends React.Component{
      constructor(props){
           super(props);
           this.state = {
             hidediv: false
           }
      }

     handleClick = (){
       this.setState({
          hidediv: true
        });
      }

      render(){
        return(
        <div>
          <div className="date-range" hidden = {this.state.hidediv}>
               <input type="submit" value="Search" onClick={this.handleClick} />
          </div>
          <div id="results" className="search-results" hidden = {!this.state.hidediv}>
                        Some Results
           </div>
        </div>
        );
      }
  }

ฉันเริ่มต้นด้วยคำแถลงนี้จากทีม React:

ในการตอบสนองคุณสามารถสร้างองค์ประกอบที่แตกต่างที่ห่อหุ้มพฤติกรรมที่คุณต้องการ จากนั้นคุณสามารถแสดงผลได้เพียงบางส่วนขึ้นอยู่กับสถานะของแอปพลิเคชันของคุณ

การสร้างการแสดงผลแบบมีเงื่อนไขใน React ทำงานในลักษณะเดียวกับที่เงื่อนไขทำงานใน JavaScript ใช้โอเปอเรเตอร์ JavaScript เช่น if หรือโอเปอเรเตอร์ที่มีเงื่อนไขเพื่อสร้างองค์ประกอบที่เป็นตัวแทนของสถานะปัจจุบันและให้ React อัปเดต UI เพื่อให้ตรงกับพวกเขา

โดยทั่วไปคุณจะต้องแสดงองค์ประกอบเมื่อคลิกปุ่มคุณสามารถทำได้สองวิธีโดยใช้ Pure React หรือใช้ CSS โดยใช้วิธี React บริสุทธิ์คุณสามารถทำสิ่งต่าง ๆ เช่นโค้ดด้านล่างในกรณีของคุณดังนั้นในการเรียกใช้ครั้งแรกผลลัพธ์ จะไม่แสดงตามที่เป็นhideResultsอยู่trueแต่โดยการคลิกที่ปุ่มสถานะจะเปลี่ยนและhideResultsเป็นfalseและส่วนประกอบที่ได้รับการแสดงผลอีกครั้งด้วยเงื่อนไขค่าใหม่นี้เป็นเรื่องธรรมดาที่จะใช้การเปลี่ยนมุมมององค์ประกอบใน React ...

var Search = React.createClass({
  getInitialState: function() {
    return { hideResults: true };
  },

  handleClick: function() {
    this.setState({ hideResults: false });
  },

  render: function() {
    return (
      <div>
        <input type="submit" value="Search" onClick={this.handleClick} />
        { !this.state.hideResults && <Results /> }
      </div> );
  }

});

var Results = React.createClass({
  render: function() {
    return (
    <div id="results" className="search-results">
      Some Results
    </div>);
   }
});

ReactDOM.render(<Search />, document.body);

หากคุณต้องการที่จะทำการศึกษาต่อไปในการแสดงผลตามเงื่อนไขในการตอบสนองได้ดูที่นี่

ตัวอย่างการซ่อน / การแสดงที่เรียบง่ายด้วย React Hooks: (ไม่มีเรื่องซอ)

const Example = () => {

  const [show, setShow] = useState(false);

  return (
    <div>
      <p>Show state: {show}</p>
      {show ? (
        <p>You can see me!</p>
      ) : null}
      <button onClick={() => setShow(!show)}>
    </div>
  );

};

export default Example;

หากคุณต้องการที่จะดูวิธีการสลับการแสดงของการชำระเงินซอนี้

http://jsfiddle.net/mnoster/kb3gN/16387/

var Search = React.createClass({
    getInitialState: function() {
        return { 
            shouldHide:false
        };
    },
    onClick: function() {
        console.log("onclick");
        if(!this.state.shouldHide){
            this.setState({
                shouldHide: true 
            })
        }else{
                    this.setState({
                shouldHide: false 
            })
        }
    },
render: function() {
    return (
      <div>
        <button onClick={this.onClick}>click me</button>
        <p className={this.state.shouldHide ? 'hidden' : ''} >yoyoyoyoyo</p>
      </div>
    );
}
});

ReactDOM.render( <Search /> , document.getElementById('container'));

วิธีง่ายๆในการแสดง / ซ่อนองค์ประกอบใน React using hooks

const [showText, setShowText] = useState(false);

ตอนนี้เรามาเพิ่มตรรกะในวิธีการเรนเดอร์ของเรา:

{showText && <div>This text will show!</div>}

และ

onClick={() => setShowText(!showText)}

ทำได้ดีมาก

ในบางกรณีองค์ประกอบการสั่งซื้อที่สูงขึ้นอาจเป็นประโยชน์:

สร้างส่วนประกอบคำสั่งซื้อที่สูงขึ้น:

export var HidableComponent = (ComposedComponent) => class extends React.Component {
    render() {
        if ((this.props.shouldHide!=null && this.props.shouldHide()) || this.props.hidden)
            return null;
        return <ComposedComponent {...this.props}  />;
    }
};

ขยายองค์ประกอบของคุณเอง:

export const MyComp= HidableComponent(MyCompBasic);

จากนั้นคุณสามารถใช้สิ่งนี้:

<MyComp hidden={true} ... />
<MyComp shouldHide={this.props.useSomeFunctionHere} ... />

สิ่งนี้จะช่วยลดความผิดเพี้ยนเล็กน้อยและบังคับใช้กับการตั้งชื่อการประชุมอย่างไรก็ตามโปรดทราบว่า MyComp จะยังคงเป็นอินสแตนซ์ - วิธีการละเว้นถูกกล่าวถึงก่อนหน้านี้:

{ !hidden && <MyComp ... /> }

ใช้โมดูลrc-if-else

npm install --save rc-if-else

import React from 'react';
import { If } from 'rc-if-else';

class App extends React.Component {
    render() {
        return (
            <If condition={this.props.showResult}>
                Some Results
            </If>
        );
    }
}

ใช้การอ้างอิงและจัดการ CSS

วิธีหนึ่งอาจใช้ React's refและจัดการคลาส CSS โดยใช้ API ของเบราว์เซอร์ ประโยชน์ของมันคือหลีกเลี่ยงการแสดงซ้ำในการตอบสนองหากจุดประสงค์เดียวคือการซ่อน / แสดงองค์ประกอบ DOM บางอย่างในการคลิกปุ่ม

// Parent.jsx
import React, { Component } from 'react'

export default class Parent extends Component {
    constructor () {    
        this.childContainer = React.createRef()
    }

    toggleChild = () => {
        this.childContainer.current.classList.toggle('hidden')
    }

    render () {
        return (
            ...

            <button onClick={this.toggleChild}>Toggle Child</button>
            <div ref={this.childContainer}>
                <SomeChildComponent/>
            </div>

            ...
        );
    }
}


// styles.css
.hidden {
    display: none;
}

ป.ล. แก้ไขให้ฉันถ้าฉันผิด :)

หากคุณใช้ bootstrap 4 คุณสามารถซ่อนองค์ประกอบด้วยวิธีนั้นได้

className={this.state.hideElement ? "invisible" : "visible"}

สิ่งนี้สามารถทำได้เช่นนี้ (วิธีที่ง่ายมาก)

 class app extends Component {
   state = {
     show: false
   };
 toggle= () => {
   var res = this.state.show;
   this.setState({ show: !res });
 };
render() {
  return(
   <button onClick={ this.toggle }> Toggle </button>
  {
    this.state.show ? (<div> HELLO </div>) : null
  }
   );
     }

ตัวอย่างนี้แสดงวิธีที่คุณสามารถสลับระหว่างส่วนประกอบต่าง ๆ โดยใช้สลับที่สลับหลังจากทุก 1 วินาที

import React ,{Fragment,Component} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Component1 = () =>(
  <div>
    <img 
src="https://i.pinimg.com/originals/58/df/1d/58df1d8bf372ade04781b8d4b2549ee6.jpg" />
   </div>
)

const Component2 = () => {
  return (
    <div>
       <img 
src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/2/2e/12ccse.jpg/250px- 
12ccse.jpg" />
  </div>
   )

 }

 class App extends Component {
   constructor(props) {
     super(props);
    this.state = { 
      toggleFlag:false
     }
   }
   timer=()=> {
    this.setState({toggleFlag:!this.state.toggleFlag})
  }
  componentDidMount() {
    setInterval(this.timer, 1000);
   }
  render(){
     let { toggleFlag} = this.state
    return (
      <Fragment>
        {toggleFlag ? <Component1 /> : <Component2 />}
       </Fragment>
    )
  }
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

ใช้รูปแบบลีนและไวยากรณ์แบบสั้น:

{ this.state.show && <MyCustomComponent /> }

ที่นี่เป็นวิธีที่ง่ายมีประสิทธิภาพและดีที่สุดมาพร้อมกับ Classless React Component สำหรับการแสดง / ซ่อนองค์ประกอบ การใช้React-Hooksซึ่งมีอยู่ในโครงการcreate-react-app ล่าสุดที่ใช้React 16

import React, {useState} from 'react';
function RenderPara(){
const [showDetail,setShowDetail] = useState(false);

const handleToggle = () => setShowDetail(!showDetail);

return (
<React.Fragment>
    <h3>
        Hiding some stuffs 
    </h3>
    <button onClick={handleToggle}>Toggle View</button>
   {showDetail && <p>
        There are lot of other stuffs too
    </p>}
</React.Fragment>)

}  
export default RenderPara;

Happy Coding :)

//use ternary condition

{ this.state.yourState ? <MyComponent /> : null } 

{ this.state.yourState && <MyComponent /> }

{ this.state.yourState == 'string' ? <MyComponent /> : ''}

{ this.state.yourState == 'string' && <MyComponent /> }

//Normal condition

if(this.state.yourState){
 return <MyComponent />
}else{
  return null;
}

คุณสามารถใช้ไฟล์ css

    var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className={`search-results ${this.state.showResults ? 'show' : ''}`}>
                Some Results
            </div>
        );
    }
})

และในไฟล์ css

    .search-results {
     ...
     display: none
     &.show {
      display: block
   }
}

var Search= React.createClass({
 getInitialState: () => { showResults: false },
 onClick: () => this.setState({ showResults: true }),
 render: function () {
   const { showResults } = this.state;
   return (
     <div className="date-range">
       <input type="submit" value="Search" onClick={this.handleClick} />
       {showResults && <Results />}
     </div>
   );
 }
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search /> , document.body);

class App extends React.Component {
  state = {
    show: true
  };

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

  render() {
    return (
      <div className="App">
        {this.state.show && 
          <img src={logo} className="App-logo" alt="logo" />
        }
        <a onClick={this.showhide}>Show Hide</a>
      </div>
    );
  }
}