차단 클릭 이벤트에서

버튼 세트 인 컨테이너가 있지만 구성 요소를 단일 구성 요소로만 관찰합니다. 이 구성 요소에는 onBlockClick이 있으며 그 위치는 id입니다.차단 클릭 이벤트에서

id을 registrationSomeContainer으로 변환하고 싶습니다.

내 문제는 어떻게 다른 컨테이너를 onBlockClick에서 처리 할 수 있습니까?

let registrationContainer = ({ 
    i18n, 
    id, 
    name, 
    representative, 
    onBlockClick, 
    dispatch 
}) => { 

    return (
     <div> 
      <div 
       className="app_wrapper" 
      > 
       <Block 
        leftIcon="close" 
        lines={[ 
         "Some", 
         representative 
        ]} 
        onBlockClick(id) 
       /> 
      </div> 
     </div> 
    ) 

}

출처

2016-10-27 Francisco Maria Calisto

유스 케이스를 명확히 할 수 있습니까? "id를 registrationSomeContainer로 변환하려면"무엇을 의미합니까? –

블록 버튼이있어서 클릭하면 다른 컨테이너로 점프하고 싶습니다. –

유스 케이스를 완전히 이해할 수는 없지만 부모가 '{currentBlock : 1}'과 같은 상태로 반응하는 구성 요소가 있어야합니다. 각 자식 블록은 고유 한 식별자를 가져야하고 표시 할 'currentBlock'과 비교해야합니다. 'onBlockClick'은 부모 상태를 업데이트하기 위해 실제로 id를 매개 변수로 호출해야합니다. –

덜 성능이 좋은 방법은

const registrationContainer = ({ 
    i18n, 
    id, 
    name, 
    representative, 
    onBlockClick, 
    dispatch 
}) => { 
    return (
     <div className="app_wrapper"> 
      <Block 
       leftIcon="close" 
       lines={[ 
        "Some", 
        representative 
       ]} 
       onBlockClick={onBlockClick.bind(null, id)} 
      /> 
     </div> 
    ); 
}

가 더 최적화 된 코드가 왜 나쁜 방법

에게 구속력을

const registrationContainer = ({ 
    i18n, 
    id, 
    name, 
    representative, 
    onBlockClick, 
    dispatch 
}) => { 
    return (
     <div className="app_wrapper"> 
      <Block 
       id={id} // Look: passing id 
       leftIcon="close" 
       lines={[ 
        "Some", 
        representative 
       ]} 
       onBlockClick={onBlockClick} // Look: not binding 
      /> 
     </div> 
    ); 
} 

class Block extends Component { 
    handleClick = (e) => { 
     this.props.onBlockClick(this.props.id); 
    }; 

    render() { 
     <div onClick={this.handleClick}> 

     </div> 
    } 
}

이 될 수있다 0

바인딩 onBlockClick={onBlockClick.bind(null, id)}은 onBlockClick이 매번 새로운 참조를 얻음으로써 하위 구성 요소가 다시 렌더링되도록합니다. 여기에서 자세한 내용을 읽어보십시오. https://daveceddia.com/avoid-bind-when-passing-props/

출처

2016-10-27 13:09:49 FlatLander

하지만 다른 'registrationSomeContainer'가 있다면 어떻게해야하나요? –

원하는 것을 자세히 설명해 주시겠습니까? – FlatLander

버튼을 클릭하면 특정 컨테이너로 이동하고 싶습니다. 각기 다른 컨테이너로 이동할 버튼이 있기 때문입니다. –

차단 클릭 이벤트에서

답변

관련 문제