React - Context issue - raphael-react

Question

私はReactとRaphaelの両方を使ってプロジェクトを作っていますが、何とか私が解決できないコンテキストの問題に直面しています。コードのバージョンを簡素化

は以下の通りである：

私の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 { 
 
\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の間にパスのattrを変更するにはPathのコンテキストを使用しますが、何とか私は常に2つのうちの1つだけを取得します。

パスからこのコンテキストを取得しますが（上記の例のように）、this.stateにはアクセスできません。 もし私が縛ると、私はこれを完全に得ることができますが、私のパスにはもうアクセスできません。 。

私は得ることはありませんが、解決策を見つけるために管理することができません。おそらく単純な結合問題

--- EDIT ---私が今立つところだ

：

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

[OK]を、問題が解決しました。ラッパーは正しい解決策ではありませんでしたが、ここであなたが興味のある方のために行く：今、私はパスラファエルオブジェクトへと親の状態へのアクセスの両方を持っているの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" から、それはPathコンポーネントのprops（児童のPlanCdf）で利用できるようになりますようことはできませんPlanCdfコンポーネントから"のattr"にアクセスするために

。

私はコンポーネントでPathをラップして、渡された小道具から「attr」を得るためにそのラッパーコンポーネントのthisコンテキストを使用して、そこにあなたが「のattr」からアクセスすることができ、ラッパーコンポーネントからのonmouseoverメソッドを呼び出すことをお勧めしますthis.props.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>

（そして、あなたのパスラッパーコンポーネントが機能コンポーネントではありません）PathWrapperのローカル状態で「attr」を格納する必要があるかもしれません：実行中のコードを見てください。私は単純化のためにラヒールを削除しましたが、他のすべては同じです。

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>