creation类的实例创建和使用

Question

我正在尝试获取类ActionEditor的一个实例，以便以后能够使用它的方法：

function render() {
    const toRender = responseActions.map((actionInstance) => {
        currentActionEditing=actionInstance;
        return <li>{ actionInstance === expandedAction ? <ActionEditor id={actionInstance.title} action={getActionByKey(actionInstance.actionType)} instance={actionInstance} state={actionInstance} /> : <button onClick={createOnClick(actionInstance)}>{actionInstance.title}</button>}</li>;
    });

    ReactDOM.render(
    <div>
        <div>{toRender}</div>
        <button style={styleButtonGenerate} onClick={onGenerateClick}>Generate</button>
    </div>,
    document.getElementById('root')
    );
}

我尝试通过如下的onClick方法来使用它：

function onGenerateClick() {
    var editor = document.getElementById(currentActionEditing.title);
    editor.prototype = ActionEditor;
    editor.methodIWantToUse();
}

但结果总是为空/未定义。

我知道这不是最好的例子，但应该足以证明这个问题。

有办法绕道吗？

Answer 1

我认为这里您想要的是将一个参考保存到组件中，以便可以访问它，请参见下面的示例中如何从父组件调用sayHi方法。

​

class MyComponent extends React.Component {
    sayHi() {
      console.log('hi');
    }
    
    render() {
       return (<div>I'm a component!</div>)
    }
}

class App extends React.Component {
   render() {
   
      // just a way to show how to access a child component method.
      setTimeout(() => {
          this.node.sayHi();
      }, 1000)
      
      
      return (<MyComponent ref={(node) => this.node = node}/>)
    }
}


ReactDOM.render(<App />, document.querySelector("body"))

<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>

​