react---サブアセンブリ親コンポーネントのメソッドを使用して、親コンポーネントのステータスを変更します.

1912 ワード

多くの場合、react親子通信を行っている場合、親子コンポーネントの純潔度を維持すべきであり、子コンポーネントは親コンポーネントの方法を自分で修正するのではなく、親コンポーネント自身の方法で自分の状態を修正すべきである.ここでは、パラメータを渡す必要がある場合、たとえばアクティブなアイテムなどの問題が発生します.
(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を変更する方法はもっと簡単です.