React의 표시 조건

이 블로그에서 React 응용 프로그램에서 조건을 보여주는 방법을 소개합니다.이것은 짧은 n'단, 정익 n'의 평균 코드 테두리를 의미한다.너는 자신의 눈앞에서 네가 만든 조건문을 볼 수 있을 것이다.너는 또 내가 지금까지 배운 다른 작은 기교도 배울 것이다.
이 시리즈의 첫 번째 블로그에서 CodePen을 사용하도록 권장합니다.CodePen은 틀리지 않지만 학습의 정신에 따라 다른 자원도 익힐 수 있습니다.
구글'codesandbox', 보셔야 합니다.

이제 리액션을 클릭합니다.왼쪽의 의존 항목에서react,react-dom,react 스크립트는 이미 우리를 위해 처리되었음을 주의하십시오.자기야, 우리 짓자!
우선, 우리는 우리에게 제공된 기능 구성 요소를 클래스 기반 구성 요소로 전환해야 한다.
이것:

import React from "react";
import "./styles.css";

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

이렇게 됩니다.

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

class App extends Component {


  render() {
    return (
      <div className="App">
        <h1>Hi, I'm Ryan...</h1>
        <h2>I am learning to code and I too get overwhelmed sometimes with all there is to learn...</h2>
        <h2>Let's overcome that feeling and learn together!</h2>
      </div>
    );
  }
}

export default App;

표시된 텍스트를 추가하고 변경한 것을 볼 수 있습니다.너는 마음대로 그것을 네가 원하는 대로 바꿀 수 있다.만약 우리가 <h2> 렌더링의 세 요소를 전환할 수 있기를 희망한다고 가정하자.우리는 단추를 사용할 수 있다...그럴게요!또한 React 응용 프로그램에서 조건부로 내용을 출력하는 두 가지 다른 방법을 소개하겠습니다.
먼저 버튼을 만듭니다.

<div className="App">
        <button>Toggle</button>
        <h1>Hi, I'm Ryan...</h1>
        <h2>I am learning to code and I too get overwhelmed sometimes with all there is to learn...</h2>
        <h2>Let's overcome that feeling and learn together!</h2>
      </div>

애플리케이션의 일부 상태를 동적으로 변경할 수 있으므로 상태를 추가해야 합니다.

class App extends Component {

  state = {
    showText: false
  }
...

이 속성을 "showText"라고 명명하지만, 마음대로 명명할 수 있습니다.초기 값이 "false"로 설정되어 있음을 주의하십시오.우리는 우리의 단추가'쇼텍스트'값을 전환할 수 있기를 바란다.이를 위해, 단추를 눌렀을 때 상태를 바꾸는 방법을 사용하기를 바랍니다.따라서 onCLickevent handler 및

<button onClick={this.toggleHandler}>Toggle</button>

다음은 단추를 눌렀을 때 속성'쇼텍스트'의 값을 변경하는 상태 변경 방법을 구축해야 합니다.

toggleHandler = () => {
    const doesShow = this.state.showText
    this.setState({showText: !doesShow})
  }

변수 "doesShow"를 정의하고 "false"로 지정합니다.여기서 주의해야 할 것은 div은'false'와 같다. 상태의'showText'의 초기 값이false이기 때문이다.그리고 setState 방법으로 "showText"의 값을 "doesShow"의 반대 값으로 변경합니다. - 이것이 "!"입니다.교환원이 들어왔다."showText"값은 우리가 만든 단추를 클릭할 때마다 상반된 값으로 변경됩니다.이것은 정말이다. 왜냐하면 최초에'doesShow'에 boolean값'false'를 분배했기 때문이다.
자, 이제 코드에서 조건문을 실현하는 두 가지 다른 방법을 살펴보겠습니다.우리는 텍스트가 단추를 눌렀을 때 표시되고 사라지기를 원한다는 것을 기억하십시오.
1. Ternary Operators
우선, 우리는 전환할 모든 내용을 div에 봉인해야 한다.

          <div>
            <h1>Hi, I'm Ryan...</h1>
            <h2>I am learning to code and I too get overwhelmed sometimes with all there is to learn...</h2>
            <h2>Let's overcome that feeling and learn together!</h2>
          </div>

우리가 출력하고자 하는 요소를 대괄호this.state.showText로 조건부 포장할 수 있습니다. 이것은 상기 모든 코드입니다.

        { 
          <div>
            <h1>Hi, I'm Ryan...</h1>
            <h2>I am learning to code and I too get overwhelmed sometimes with all there is to learn...</h2>
            <h2>Let's overcome that feeling and learn together!</h2>
          </div> 
        }

이제 우리는 괄호 안에 3원 조건 논리를 추가할 수 있다.

<div className="App">
        <button onClick={this.toggleHandler}>Toggle</button>
        { this.state.showText ?
          <div>
            <h1>Hi, I'm Ryan...</h1>
            <h2>I am learning to code and I too get overwhelmed sometimes with all there is to learn...</h2>
            <h2>Let's overcome that feeling and learn together!</h2>
          </div> : null
        }
      </div>

위의 코드에서 볼 수 있듯이 만약{}의 계산 결과가true라면, 우리는 텍스트의 표현을 보아야 한다. 만약에 그 계산 결과가false라면, 우리는 아무것도 볼 수 없을 것이다.삼원 연산자는 this.state.showText 을 사용하여else 상황을 처리합니다. 위에서 보듯이 - : 는 기본적으로 "else nothing"을 표시합니다.
만약 모든 것이 정상이라면, 단추를 누르기 전에 텍스트를 볼 수 없을 것입니다.그리고 클릭할 때마다 텍스트를 전환해야 합니다!깔끔해, 응!?
문제가 있는 경우 다음 전체 코드를 확인하십시오.

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

class App extends Component {

  state = {
    showText: false
  }

  toggleHandler = () => {
    const doesShow = this.state.showText
    this.setState({showText: !doesShow})
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.toggleHandler}>Toggle</button>
        { this.state.showText ?
          <div>
            <h1>Hi, I'm Ryan...</h1>
            <h2>I am learning to code and I too get overwhelmed sometimes with all there is to learn...</h2>
            <h2>Let's overcome that feeling and learn together!</h2>
          </div> : null
        }
      </div>
    );
  }
}

export default App;

2. JS if statements
if 문장을 사용하는 방법은 일반적으로React에서 조건 내용을 출력하는 첫 번째 방법이다.특히 대형 응용 프로그램을 처리할 때우리는 우리가 구축한 단추를 눌렀을 때마다 상태를 바꾸고 있다는 것을 이미 알고 있다.React는 또한 상태에 대한 모든 변경 사항을 추적하고 상태가 바뀔 때마다 실제 호출 : null 방법을 사용하여 최신 내용이 있는지 확인합니다.이 사실을 이해한 후에 우리는 다음과 같은 방법으로 조건의 내용을 출력할 수 있다.render 방법 내부에 있지만 render 위에 변수를 정의하고 값을 null로 지정합니다.

render() {

    let text = null

    return (...

그리고 우리는 전통적인 if문장을 사용한다.

render() {

    let text = null
    if (this.state.showText) {
      text = ()
    }

    return (...

상기 코드에서 return 단추가 눌려서 상태가 바뀌어서true로 계산될 때마다 "text"변수는 하나의 값을 분배합니다.

<div>
          <h1>Hi, I'm Ryan...</h1>
          <h2>I am learning to code and I too get overwhelmed sometimes with all there is to learn...</h2>
          <h2>Let's overcome that feeling and learn together!</h2>
        </div>

따라서 반환에서 상기 코드를 삭제하고 if 문장 블록에서 지정한 "text"괄호에 삽입합니다. 아래와 같습니다.

render() {

    let text = null
    if (this.state.showText) {
      text = (
        <div>
          <h1>Hi, I'm Ryan...</h1>
          <h2>I am learning to code and I too get overwhelmed sometimes with all there is to learn...</h2>
          <h2>Let's overcome that feeling and learn together!</h2>
        </div>
      )
    }
    return (
      <div className="App">
        <button onClick={this.toggleHandler}>Toggle</button>
      </div>
    );
  }
}

우리가 해야 할 마지막 일은 되돌아오는 과정에서 "text"변수를 동적으로 보여주는 것이다. 다음과 같다.

return (
      <div className="App">
        <button onClick={this.toggleHandler}>Toggle</button>
        {text}
      </div>
    );

이 단계를 완료하면 버튼은 텍스트 표시 여부를 전환해야 합니다.문제가 발생하면 다음 전체 코드를 확인하십시오.

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

class App extends Component {

  state = {
    showText: false
  }

  toggleHandler = () => {
    const doesShow = this.state.showText
    this.setState({showText: !doesShow})
  }

  render() {

    let text = null
    if (this.state.showText) {
      text = (
        <div>
          <h1>Hi, I'm Ryan...</h1>
          <h2>I am learning to code and I too get overwhelmed sometimes with all there is to learn...</h2>
          <h2>Let's overcome that feeling and learn together!</h2>
        </div>
      )
    }
    return (
      <div className="App">
        <button onClick={this.toggleHandler}>Toggle</button>
        {text}
      </div>
    );
  }
}

export default App;

아름답다이 코드에서 두 가지 다른 방법으로 조건의 내용을 출력하는 방법을 배웠습니다. (1) 삼원조와 (2)if문장입니다.지식과 경험을 얻는 동시에 즐겁게 놀았으면 좋겠습니다.만약 당신이 이것을 좋아하고 그것이 매우 유용하다고 생각한다면, 공유하고 피드백을 주십시오.만약 당신이 나보다 더 잘 설명할 수 있다고 생각한다면, 평론에서 저에게 알려주세요!
건배!