상태 안티 패턴의 소품

Question

그래서 나는 반 패턴으로 간주되는 상태에서 소품 사용을 제안하는 반응 문서를 읽고있었습니다. 필자는 쓰기가 어떤 것인지 알고 싶었습니다. 부모 상태 컨테이너에 상태가있는 자식 구성 요소로 데이터를 전달했습니다. 내가 CDM 방법

constructor(props) { 
    this.state = { 
    name = '' 
    } 
} 

componentDidMount() { 
    this.setState({name : this.props.name}) 
} 

감사하겠습니다 여기에 어떤 도움이나 토론에 상태를 업데이트 할 경우

constructor(props) { 
    this.state = { 
    name = this.props.name 
    } 
} 

그래서 내가 궁금가 괜찮습니다.

Answer 1

주에서 소품을 사용하는 것은 큰 일이 아닙니다. 다음은 이러한 상황을 처리하는 방법의 예입니다.

class Parent extends Component { 
    state = { 
     name: 'John Doe' 
    } 

    updateName = (name) => { 
     this.setState({ name }); 
    }; 

    render() { 
     return (
      <div> 
       <label>Your Name</label> 
       <Input value={this.state.name} updateName={this.updateName} /> 
      </div> 
     ); 
    } 
} 

class Input extends Component { 
    handleUpdate = (e) => { 
     this.props.updateName(e.target.value); 
    }; 

    render() { 
     return <input value={this.props.value} onChange={this.handleUpdate} /> 
    } 
}