Question

假设我有以下课程：

class App {
    constructor() {
        super();         
        this.pawns[3][2] = this.getRegPawn(PAWN.BLUE);
        debugger;   /// HERE !!!
    }

    getRegPawn(pawnType) {
        return <RegularPawn pawnType={pawnType}/>;
    }    
}

    class RegularPawn extends AbstractPawn {

        constructor(props) {
            super(props);
        }

        isBasicMove() {
            ...
        }

        isStrikeMove() {
           ....
            }
            return false;
        }

        render() {
            const _this = this;
            switch (this.props.pawnType) {
                case PAWN.BLUE:
                    pawn = <div className="bluePawn" ref = {() => {return _this}}></div>;
                    break;
                case PAWN.RED:
                    pawn = <div className="redPawn" ref = {() => {return _this}}></div>;
                    break;
            }
            return pawn;
        }
    }

我的目的是通过访问this.pawns [3] [2]来访问RegularPawn类中的方法。

存储在this.pawns [3] [2]中的对象是：

我试过了： this.pawns [3] [2] .isBasicMove（）

this.pawns [3] [2] .props.isBasicMove（）

this.pawns [3] [2] .ref.isBasicMove（）

this.pawns [3] [2] .props.ref.isBasicMove（）

并且没有一个成功。你知道什么可以帮助我吗？

Answer 1

为了使用子组件中的函数，您需要使用引用而不是来自react的createElement调用的返回值（这是JSX标记的返回值）。

您可以将ref回调传递给子组件，并使用返回的值来分配pawn矩阵。

以下是一个简单的示例，说明如何使用它与您尝试执行的操作相比：

警报1按钮在您使用时表现不佳，但它不起作用，另一方面，警报2按钮正在使用ref，这是可行的方法。

class Hello extends React.Component {
	constructor() {
  super();
   this.child = <Child ref={(ref) => {this.child2 = ref;}} />
   console.log(this.child);
  }
  
  childAllert1() {
  this.child.allert();
  }
  
  childAllert2() {
  this.child2.allert();
  }

  render() {
    return (
    <div>
    Hello {this.props.name}
    <button onClick={this.childAllert1.bind(this)} >Alert1</button>
    <button onClick={this.childAllert2.bind(this)} >Alert2</button>
    {this.child}
    </div>);
  }
}

class Child extends React.Component {

  allert() {
		alert("called");
  }
  render() {
    return <div>Hello
    </div>;
  }
}


ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

<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="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

React：我如何访问生成JSX的类的方法？

1 个答案: