React에서 컴포넌트 통신 사용에 대한 자세한 설명

이번에는 React에서 컴포넌트 커뮤니케이션을 사용하는 방법에 대해 자세히 설명하겠습니다. React에서 컴포넌트 커뮤니케이션을 사용할 때 주의사항은 무엇인가요?

컴포넌트 통신

여기서는 React 컴포넌트와 컴포넌트 자체 간의 통신에 대해서만 설명합니다. 컴포넌트 통신은 주로 세 부분으로 나뉩니다.

• 상위 컴포넌트에서 하위 컴포넌트로의 통신: 상위 컴포넌트는 하위 컴포넌트에 매개변수를 전달하거나 상위 구성 요소 호출 하위 구성 요소의 메서드

• 하위 구성 요소는 상위 구성 요소와 통신합니다. 하위 구성 요소는 상위 구성 요소에 매개 변수를 전달하거나 하위 구성 요소는 상위 구성 요소의 메서드를 호출합니다.

• Sibs 구성 요소 통신: 형제 구성 요소는 매개 변수를 전달하거나 서로 호출합니다

너무 깊은 중첩 관계는 가지지 않는 것이 좋습니다

부모 컴포넌트는 자식 컴포넌트와 통신합니다

• 부모: 자식 컴포넌트를 호출하는 방법은 주로 this.refs.c1.changeChildren1을 사용합니다 this.refs.c1.changeChildren1

• 父：向子组件传参主要使用 text={this.state.text}

• 子：定义方法 changeChildren1 供父组件调用

• 子：使用通过属性 this.props.text 获取来自父组件的传参

//父组件向子组件通信
//父组件
var ParentComponent1 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    //输入事件
    change: function(event){
        this.setState({text: event.target.value});
        //调用子组件的方法
        this.refs.c1.changeChildren1(event.target.value);
    },
    render: function(){
        return (
            <p>
                <p><label>父组件</label><input type="text" onChange={this.change}/></p>
                <ChildrenComponent1 ref="c1" text={this.state.text}/>
            </p>                        
        )
    }
}) 
//子组件
var ChildrenComponent1 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    //被父组件调用执行
    changeChildren1: function(text){
        this.setState({text: text});
    },
    render: function(){
        return (
            <p>
                <p>子组件-来自父组件的调用：{this.state.text}</p>
                <p>子组件-来自父组件的传参：{this.props.text}</p>
            </p>                        
        )
    }
})  
ReactDOM.render(<ParentComponent1/>, document.getElementById('p1'));

子组件向父组件通信

• 父：定义方法 changeParent 供子组件调用

• 子：调用父组件的方法主要使用 this.props.change(event.target.value);

Parent: 하위 구성 요소에 매개 변수를 전달하는 데는 주로 text={this.state.text}

• Child를 사용합니다. 상위 구성 요소가

Child를 호출할 수 있도록 ChangeChildren1 메서드를 정의합니다. : 패스 속성 this.props.text를 사용합니다. 상위 구성 요소에서 전달된 매개 변수를 가져옵니다

//子组件向父组件通信
//父组件
var ParentComponent2 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    //被子组件调用执行
    changeParent: function(text){
        this.setState({text: text});
    },
    render: function(){
        return (
            <p>
                <p>父组件-来自子组件的调用：{this.state.text}</p>                     
                <ChildrenComponent2 change={this.changeParent}/>
            </p>                        
        )
    }
}) 
//子组件
var ChildrenComponent2 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    //输入事件
    change: function(event){
        //调用子组件的方法
        this.props.change(event.target.value);
    },
    render: function(){
        return (
            <p>
                <p><label>子组件</label><input type="text" onChange={this.change}/></p>
            </p>                        
        )
    }
})  
ReactDOM.render(<ParentComponent2/>, document.getElementById('p2'));

하위 구성 요소는 상위 구성 요소와 통신합니다.

Parent: 호출할 자식 구성 요소

Child: 상위 구성 요소 호출 이 메서드는 주로 this.props.change(event.target.value);

//兄弟组间通信-通过共同的父组件通信
//父组件
var ParentComponent3 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    //被子组件2调用，向子组件1通信
    changeChildren1: function(text){
        //调用子组件1的方法
        this.refs.cp1.changeState(text);
    },
    //被子组件1调用，向子组件2通信
    changeChildren2: function(text){
        //调用子组件2的方法
        this.refs.cp2.changeState(text);
    },                
    render: function(){
        return (
            <p>
                <p>父组件-来自子组件的调用：{this.state.text}</p>                     
                <ChildrenComponent3_1 change={this.changeChildren2} ref="cp1"/>
                <ChildrenComponent3_2 change={this.changeChildren1} ref="cp2"/>
            </p>                        
        )
    }
}) 
//子组件1
var ChildrenComponent3_1 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    changeState: function(text){
        this.setState({text: text});
    },                  
    //输入事件
    change: function(event){
        //调用子组件的方法
        this.props.change(event.target.value);
    },
    render: function(){
        return (
            <p>
                <p><label>子组件1</label><input type="text" onChange={this.change}/></p>
                <p>来自子组件2的调用-{this.state.text}</p>
            </p>                        
        )
    }
})  
//子组件2
var ChildrenComponent3_2 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },              
    changeState: function(text){
        this.setState({text: text});
    },  
    //输入事件
    change: function(event){
        //调用子组件的方法
        this.props.change(event.target.value);
    },
    render: function(){
        return (
            <p>
                <p><label>子组件2</label><input type="text" onChange={this.change}/></p>
                <p>来自子组件1的调用-{this.state.text}</p>
            </p>                        
        )
    }
})              
ReactDOM.render(<ParentComponent3/>, document.getElementById('p3'));

형제 구성 요소 통신
🎜을 사용합니다. 방법 1: 공통 부모 컴포넌트를 통해 통신🎜🎜🎜🎜React 컴포넌트에는 단 하나의 최상위 요소만 있어야 하므로 형제 컴포넌트 간에 공통 부모 요소(컴포넌트)가 있어야 형제가 공통 부모를 통해 통신할 수 있기 때문입니다. 요소(컴포넌트)의 통신 방식은 동일합니다. 위에서 소개한 아버지-아들과 아들-아버지의 조합은 🎜

//兄弟组间通信-通过 context 通信
//父组件
var ParentComponent4 = React.createClass({
    getChildContext: function(){
        return {
            changeChildren1: function(text){
                this.refs.cp1.changeState(text)
            }.bind(this),
            changeChildren2: function(text){
                this.refs.cp2.changeState(text)
            }.bind(this)
        }
    },
    childContextTypes: {
        changeChildren1: React.PropTypes.func.isRequired,
        changeChildren2: React.PropTypes.func.isRequired
    },                
    render: function(){
        return (
            <p>
                <ChildrenComponent4_1 ref="cp1"/>
                <ChildrenComponent4_2 ref="cp2"/>
            </p>                        
        )                    
    }
}) 
//子组件1
var ChildrenComponent4_1 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    contextTypes: {
        changeChildren2: React.PropTypes.func.isRequired
    },                         
    changeState: function(text){
        this.setState({text: text});
    },                  
    //输入事件
    change: function(event){
        //调用子组件的方法
        this.context.changeChildren2(event.target.value);
    },
    render: function(){
        return (
            <p>
                <p><label>子组件1</label><input type="text" onChange={this.change}/></p>
                <p>来自子组件2的调用-{this.state.text}</p>
            </p>                        
        )
    }
})  
//子组件2
var ChildrenComponent4_2 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },   
    contextTypes: {
        changeChildren1: React.PropTypes.func.isRequired
    },                            
    changeState: function(text){
        this.setState({text: text});
    },  
    //输入事件
    change: function(event){
        //调用子组件的方法
        this.context.changeChildren1(event.target.value);
        
    },
    render: function(){
        return (
            <p>
                <p><label>子组件2</label><input type="text" onChange={this.change}/></p>
                <p>来自子组件1的调用-{this.state.text}</p>
            </p>                        
        )
    }
});                
ReactDOM.render(<ParentComponent4/>, document.getElementById('p4'));

🎜 방법 2: 컨텍스트를 통한 통신🎜을 달성할 수 있다는 점은 공통 상위 컴포넌트를 통한 통신과 동일합니다. 해당 컨텍스트는 🎜rrreee🎜라고 합니다. 이 글의 사례를 읽으신 후 마스터하셨을 거라 믿습니다. 더 흥미로운 방법을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 글을 주목해 보세요! 🎜🎜추천 자료: 🎜🎜🎜PromiseA+🎜🎜🎜🎜🎜React 구현에서 선택한 li를 강조 표시하는 단계에 대한 자세한 설명🎜🎜🎜

위 내용은 React에서 컴포넌트 통신 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!