부모 상태에 따라 동적으로 반응 구성 요소를 렌더링합니다.

Question

기본적으로 부모 구성 요소에는 양식이 있으며, 부모 상태를 기반으로 표시되어야하는 로더가있는 하위 구성 요소가 있습니다.

import React from 'react'; 
import Overlay from './overlay'; 

export default class RegisterForm extends React.Component { 
    constructor { 
    this.state = { 
     loading: false 
    }; 
    } 
    handleSubmit(){ 
    this.state.loading = true; 
    ... 
    } 

    render(){ 
    return(
    <form onSubmit={() => this.handleSubmit()}> 
    ... 
    <Overlay /> 
    </form> 
    ); 
    } 
} 

어떻게하면됩니까?

나는 React.cloneElement(<Overlay />, {})을 시도했지만 내가 이해 나는 부모에게이 아이를 다시 추가하는 방법을 알고하지 않습니다, 그것은 일을 사물의 반작용 방향이 아니다 ...

나는 또한 설정 시도 prop 산부인과 Overlay React.cloneElement(<Overlay />, { visible = this.state.loading }) 같은 부모의 state을 기반으로하지만 구성 요소를 렌더링하는 데 ...이 일을 얻을 삼항 연산자의

Answer 1

만들기 사용할 수없는 것. React JSX는 다음과 같은 렌더링을위한 If-else 로직을 지원합니다. {(this.state.loading == false) ? <Overlay /> : null}

직접 할당 대신 상태를 변경하려면 this.setState({loading: true});을 사용해야합니다. 또한 내가 렌더링 기능에 반환 절을 그리워하지 기억

render() { 
    return (
    <form onSubmit={this.handleSubmit}> 
     { this.state.loading == false && <Overlay /> } 
    </form> 
); 
} 

질문

의 경우에 대한 삼항 연산자보다 아래의 표현을 선호하여 handleSubmit();

import React from 'react'; 
import Overlay from './overlay'; 

export default class RegisterForm extends React.Component { 
    constructor { 
    this.state = { 
     loading: false 
    }; 
    } 
    handleSubmit(event){ 
    event.preventDefault(); 
    this.setState({loading: true}); 
    ... 
    } 

    render(){ 
    <form onSubmit {()=>{this.handleSubmit()}> 

    {(this.state.loading == false) ? <Overlay /> : null} 
    </form> 
    } 
} 

Answer 2

에 event.preventDefault()를 사용합니다. 배정으로 상태를 직접 변경하지 마십시오. 다음은 버튼을 클릭하여 양식을 제출하고로드 메시지를 표시하는 작업 구성 요소입니다. 이것은 행동을 얻기위한 전형적인 반응 방법입니다.

class HelloWidget extends React.Component{ 
    constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this) 
    this.state = { 
     loading: false 
    }; 
    } 
    handleSubmit() { 
    this.setState({ loading: true }); 
    } 
    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     { this.state.loading && <div>loading...</div> } 
     <button>click</button> 
     </form> 
    ); 
    } 
} 

---

부록 - 아래 두 속기 트릭입니다.

삼원 연산자

속기

render() { 
    return condition === someCondition ? <CompA /> : <CompB />; 
} 

긴 형식

render() { 
    if (condition === someCondition) { 
    return <CompA />; 
    } else { 
    return <CompB />; 
    } 
} 

부울 AND 연산자 & & :

,

속기

render() { 
    return condition === someCondition && <CompA />; 
} 

긴 형식은

render() { 
    if (condition === someCondition) { 
    return <CompA />; 
    } else { 
    return null; 
    } 
}