나는이 개 파일이에서이 JS 반응 부모

Question

에 this.props.functionName()의 결과를 다시 전달 그것들은 소품으로서의 커스텀 기능을 가지고 있습니다.

파일 2 : PreviewChatBox.js

이 파일은 여러 채팅의 미리보기를 보여줍니다. chat.js (채팅로드)에서 보낸 함수를 호출하면 Chat.js의 상태가 미리보기 구성 요소 중 하나의 정수로 변경됩니다.

Chat.js에서 해당 구성 요소에 액세스 할 수 있어야하지만 변수를 다시 전달할 수없는 것 같습니다.

CODE :

파일 1 : Chat.js

render(){ 
    return(
    <PreviewChatBox onClicked={() => this.previewClicked()}/> 
)} 

파일 2 : PreviewChatBox.js

<div onClick={() => this.props.onClicked()} key={value}> 
    <p> {element[0]}{element[1]}{element[2]} </p> 
</div> 

그래서 내가 어떤없이 메서드를 호출 할 수 있습니다 문제가 있지만 다시 chat.js에 열쇠를 전달할 수 없다.

Answer 1

콜백 함수를 사용해 보았습니까?

Chat.js

<PreviewChatBox 
    onClicked={() => this.previewClicked()} 
    updateKey((newKey) => this.setState({newKey}) /> 

지금 당신의 아이 컴포넌트는 소품에서에 updateKey 기능에 액세스하여 Chat.js의 상태를 업데이트 할 수 있어야한다.

Answer 2

희망 사례와 일치하는 데 도움이 되길 원하지만 화살표 기능을 사용하지 않고 Chat.js에서 직접 previewClicked 메소드를 참조하고 PreviewChatBox.js에서 onClick 비헤이비어로 직접 키를 전달하면이 작업을 수행 할 수 있습니다.

파일 1 :

previewClicked = (val) => { 
    console.log(val); 
}; 

render() { 
    return (
     <PreviewChatBox onClicked={ this.previewClicked }/> 
     ) 
}; 

파일 2 Chat.js : PreviewChatBox.js를

const element = ['abc','def','ghi']; 
const value = 2; 

return ( 
<div onClick={() => props.onClicked(value) } key={value}> 
<p> {element[0]}{element[1]}{element[2]} </p> 
</div> 
);