这在React组件中

时间:2017-06-15 10:45:35

标签: javascript reactjs typescript react-dom

好的,我对理解这个概念有些麻烦。救救我!

父组件:菜单

export class Menu extends React.Component<any,any>{
...whole bunch of stuff
 .
 .
 .some nested components in render
    render(){     
       return <MuiThemeProvider muiTheme={muiTheme}>  
        <ReactGridLayout {...some_props}>
            <div key={'canvas'}>               


 <Canvas {...this.canvas}/>


             </div>
        </ReactGridLayout>   
        </MuiThemeProvider>   
   }   

子组件:画布

export class Canvas extends React.Component<CanvasProps,CanvasState>{
...whole bunch of stuff
     .
     .
render(){        
        //return this.props.decorate(this.createCanvas());
        return <canvas
                width={this.width}
                height={this.height}  
                onClick={this.lock(this.setSelected)} 
                onWheel={this.lock(this.zoom)}   
                onMouseMove={this.lock(this.rotate)}
                >{this.props.title}
                </canvas>  
      }; 

我在做什么:

1.将数组发送到菜单)道具,数组包含菜单组件的一些参数和孩子的道具画布)。

let menu_props=[
            props,
            width,
            height
        ];  

        ReactDOM.render( 
            <Menu>            
                {...menu_props}
            </Menu>,  
            document.getElementById('canvas')
        ); 

2.在菜单

中,从此数组中选择画布道具
this.canvas=this.props.children[0];   
this.width=this.props.children[1]; 
this.height=this.props.children[2];

3.来自父母的<{1}} 菜单

结果

  

TypeError:this.context.clearRect不是函数       在Canvas.componentDidUpdate(canvas.js:63996)

问题:我知道由于某种原因,我的canvas组件开始引用父组件的这个,我无法理解为什么会发生这种情况。我如何封装每个组件的范围,以便他可以参考他自己的这个。谢谢!

1 个答案:

答案 0 :(得分:1)

我认为您无法访问父级this。但是,我有点惊讶为什么你使用children[<index>]而不是简单地将menu_props作为道具传递:

let menu_props = {
  canvas: props,
  width,
  height
};

ReactDOM.render( 
  <Menu { ...menu_props } />,
  document.getElementById('canvas')
);

然后你会:

const { canvas, width, height } = this.props;

Canvas中。一般情况下,我在React组件中使用this看不到太多值,因为您可以在每个类方法中访问this.props。所以如果你需要一些东西

const { <something> } = this.props;