이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!