react---サブアセンブリ親コンポーネントのメソッドを使用して、親コンポーネントのステータスを変更します.
1912 ワード
多くの場合、react親子通信を行っている場合、親子コンポーネントの純潔度を維持すべきであり、子コンポーネントは親コンポーネントの方法を自分で修正するのではなく、親コンポーネント自身の方法で自分の状態を修正すべきである.ここでは、パラメータを渡す必要がある場合、たとえばアクティブなアイテムなどの問題が発生します.
(1)bindを使用してthisを親コンポーネントに変更する方法:
サブアセンブリ
(1)匿名関数を使用した親コンポーネント
匿名関数を使用する場合、パラメータには外層の匿名関数から内層の匿名関数が必要です.さもないとサブコンポーネントに親コンポーネントに渡されるパラメータのまとめと結婚できません:bindを使用してthisを変更する方法はもっと簡単です.
(1)bindを使用してthisを親コンポーネントに変更する方法:
constructor(props){
super()
this.state={
activeTab:'0',// tab
}
this.handleClickTab = this.handleClickTab.bind(this)
}
handleClickTab(data){
const {activeTab} = this.state
if(data == activeTab) return
this.setState({
activeTab:data
})
}
render(){
const {pathKey,tabsTitlte,tabsTitlte2,activeTab} = this.state
return (
)
}
サブアセンブリ
import React from 'react'
import styles from './index.less'
const Tabscm=(props)=>{
const {tabs,handleClick,active} = props
return(
{tabs.map((item,i)=>{
return ({handleClick(i)}}>{item.title})
})}
)
}
export default Tabscm;
(1)匿名関数を使用した親コンポーネント
handleClickTab=(data)=>{
const {activeTab} = this.state
if(data == activeTab) return
this.setState({
activeTab:data
})
}
render(){
const {pathKey,tabsTitlte,tabsTitlte2,activeTab} = this.state
return (
{
this.handleClickTab(data)
}} />
)
}
匿名関数を使用する場合、パラメータには外層の匿名関数から内層の匿名関数が必要です.さもないとサブコンポーネントに親コンポーネントに渡されるパラメータのまとめと結婚できません:bindを使用してthisを変更する方法はもっと簡単です.