React - 문맥 문제 - raphael-react

Question

나는 React와 Raphael을 모두 사용하여 프로젝트를 만들고 있는데, 어떻게 든 해결할 수없는 상황에 직면 해있다.

import React from 'react'; 
 
import {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} from 'react-raphael'; 
 

 
export default class PlanCdf extends React.Component { 
 
\t onmouseover(){ 
 
\t \t console.log(this); 
 
\t \t console.log(this.props.project); 
 
\t } 
 

 
\t drawTasks() { 
 
\t \t return this.props.tasks.map((task) => { 
 
\t \t \t return <Path mouseover={this.onmouseover} key={task._id} d={coords} attr={{"fill":"#444444", "stroke-width" : "2"}} /> 
 
\t \t }) 
 
\t } 
 

 
\t render() { 
 
\t \t return(
 
\t \t \t <Paper className={"paper"} width={this.state.paperWidth} height={this.state.paperHeight}> 
 
\t \t \t \t <Set> 
 
\t \t \t \t \t { this.drawTasks() } 
 
\t \t \t \t </Set> 
 
\t \t \t </Paper> 
 
\t \t) 
 
\t } 
 
}

나는 두 컨텍스트에 액세스하고 싶습니다 내 onMouseover와 기능에

: 상태와 소품에 액세스하기 위해 일반적인 상황과

는 코드의

간체 버전은 다음과 같다 onmouseover 동안 경로의 attr을 변경하려면 Path 컨텍스트가 있지만 어쨌든 나는 항상 둘 중 하나만 가져올 수 있습니다.

위의 예와 같이 경로에서이 컨텍스트 중 하나를 얻지 만 this.state에 액세스 할 수 없습니다. 또는 바인딩하면 더 이상 내 경로에 액세스하지 못했습니다. .

내가하지 않지만 해결책을 찾기 위해 관리 할 수 ​​없습니다 아마 간단한 바인딩 문제

--- 편집 --- 내가 지금 어디에 서의

:

import React from 'react'; 
import {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} from 'react-raphael'; 

export default class PlanCdf extends React.Component { 
    constructor(props) { 
     super(props); 
     this.drawTasks = this.drawTasks.bind(this); 
    } 

    onmouseover(){ 
     console.log(this.state); 
    } 

    drawTasks() { 
     return this.props.tasks.map((task) => { 
      return <PathWrapper mouseover={this.onmouseover} key={task._id} d={coords} attr={{"fill":"#444444", "stroke-width" : "3"}} /> 
     }) 
    } 

    render() { 
     return(
      <Paper className={"paper"} width={this.state.paperWidth} height={this.state.paperHeight}> 
       <Set> 
        { this.drawTasks() } 
       </Set> 
      </Paper> 
     ) 
    } 
} 


export class PathWrapper extends React.Component { 
    constructor(props){ 
     super(props); 
    } 

    onmouseover() { 
     console.log(this) 
     this.attr({'stroke-width':'5'}) 
     this.props.mouseover() 
    } 

    render() { 
     return <Path mouseover={this.onmouseover} d={this.props.d} attr={this.props.attr} /> 
    } 
} 

제안 된대로 새로운 PathWrapper 구성 요소에서 attr을 변경할 수 있습니다. 하지만 여전히 아무데도 내가 그 상태에 접근 할 수 있습니다. 부모 함수에 액세스하기 위해 소품으로 전송 된 함수를 호출하려고 시도했지만 속성을 변경하기 위해 Path 컨텍스트에 있어야하므로 할 수 없습니다 ... 하위 구성 요소로 pb를 다소 이동 시켰습니다

Answer 1

좋아, 문제 해결.래퍼는 최적의 솔루션 아니었지만, 여기 당신은 그 관심이 갈 :

내가 경로 라파엘 개체와 부모의 상태에 모두 액세스 할 수 onMouseover와 지금의

import React from 'react'; 
import {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} from 'react-raphael'; 

export default class PlanCdf extends React.Component { 
    constructor(props) { 
     super(props); 
     this.drawTasks = this.drawTasks.bind(this); 
    } 

    onmouseover(raphael_context){ 
     console.log(this.state); 
     raphael_context.attr({'stroke-width':'5'}); 
    } 

    drawTasks() { 
     return this.props.tasks.map((task) => { 
      var self = this; 
      return <Path mouseover={function() { return self.onmouseover(this) }} key={task._id} d={coords} attr={{"fill":"#444444", "stroke-width" : "3"}} /> 
     }) 
    } 

    render() { 
     return(
      <Paper className={"paper"} width={this.state.paperWidth} height={this.state.paperHeight}> 
       <Set> 
        { this.drawTasks() } 
       </Set> 
      </Paper> 
     ) 
    } 
} 

!

Answer 2

React 클래스를 사용하고 있으므로 생성자에서 메서드를 바인딩하거나 화살표 함수를 사용하여 반응 컨텍스트에 바인딩해야합니다. 당신이"PlanCdf"에서이 경로 구성 요소의 props (아이 의 PlanCdf)에 제공 될 예정으로 그렇게 할 수 없습니다 PlanCdf 구성 요소에서 "ATTR"에 액세스하기위한

.

내가 구성 요소에 Path을 포장하고 전달 소품에서 "attr"을 얻기 위해 그 래퍼 구성 요소의 this 컨텍스트를 사용하고 거기에 당신이 "ATTR"에서 액세스 할 수있는, 래퍼 구성 요소에서 onMouseover와 메소드를 호출 할 수 제안 this.props.attr. 당신이 그것을 돌연변이하려면

또한 (다음 경로 래퍼 구성 요소가 기능 컴포넌트되지 않습니다) PathWrapper의 로컬 상태에서 "attr"을 저장해야 할 수 있습니다

import React from 'react'; 
 
import {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} from 'react-raphael'; 
 

 
export default class PlanCdf extends React.Component { 
 

 
    constructor() { 
 
    super(props); 
 
    
 
    this.drawTasks = this.drawTasks.bind(this); 
 
    } 
 
\t onmouseover(){ 
 
\t \t console.log(this); 
 
\t \t console.log(this.props.attr); 
 
    // Here you can the attr to a different color 
 
\t } 
 

 
\t drawTasks() { 
 
\t \t return this.props.tasks.map((task) => { 
 
\t \t \t return <PathWrapper mouseover={this.onmouseover} key={task._id} d={coords} attr={{"fill":"#444444", "stroke-width" : "2"}} /> 
 
\t \t }) 
 
\t } 
 

 
\t render() { 
 
\t \t return(
 
\t \t \t <Paper className={"paper"} width={this.state.paperWidth} height={this.state.paperHeight}> 
 
\t \t \t \t <Set> 
 
\t \t \t \t \t { this.drawTasks() } 
 
\t \t \t \t </Set> 
 
\t \t \t </Paper> 
 
\t \t) 
 
\t } 
 
} 
 

 
const PathWrapper = ({mouseover, key, d, attr}) => { 
 
    return (<Path mouseover={onmouseover} key={key} d={d} attr={attr} />); 
 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

편집 : 실행중인 코드를 아래에서 확인하십시오. 나는 단순함으로 rapheal을 제거했지만 다른 모든 것들은 동일합니다.

class PlanCdf extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      attr : { 
 
       "backgroundColor":"#444444", 
 
       "border" : "3px solid green" 
 
      }, 
 
      oldattr : { 
 
      } 
 
     }; 
 
     this.drawTasks = this.drawTasks.bind(this); 
 
     this.onmouseover = this.onmouseover.bind(this); 
 
     this.onmouseout = this.onmouseout.bind(this); 
 

 
    } 
 

 
    onmouseover(){ 
 
    
 
     const newAttr = { 
 
       "backgroundColor":"#444444", 
 
       "border" : "1px solid green" 
 
       }; 
 
     
 
     this.setState((prevState, props) => ({ attr : newAttr, oldattr : prevState.attr })); 
 
    } 
 

 
    onmouseout() { 
 
     this.setState((prevState, props) => ({attr : prevState.oldattr, oldattr : prevState.attr })); 
 
    } 
 

 
    drawTasks() { 
 
     return this.props.tasks.map((task) => { 
 
      return <PathWrapper mouseover={this.onmouseover} mouseout={this.onmouseout} key={task._id} attr={this.state.attr} /> 
 
     }) 
 
    } 
 

 
    render() { 
 
     return(
 
      <div> 
 
       { this.drawTasks() } 
 
      </div> 
 
     ) 
 
    } 
 
} 
 

 
class PathWrapper extends React.Component { 
 
    constructor(props){ 
 
     super(props); 
 
    } 
 

 
    render() { 
 
     return <div className="test" style={this.props.attr} onMouseOver={this.props.mouseover} onMouseOut={this.props.mouseout} > This is test </div>; 
 
    } 
 
} 
 

 
const tasks = [{_id:1},{_id:2}]; 
 
ReactDOM.render(
 
    <PlanCdf tasks={tasks} />, 
 
    document.getElementById('root') 
 
);

.test { 
 
    width: 100px; 
 
    height:150px; 
 
    border: 1px solid red; 
 
    margin : 5px; 
 
    padding : 5px; 
 
    color : white; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>