React - class 的实例创建和使用

Question

我正在尝试获取 class 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();
}

但结果总是null/undefined。

我知道这不是最好的例子，但足以说明问题。
有办法解决这个问题吗？

Answer 1

我想你在这里想要的是将 ref 保存到组件以便可以访问它，请参见下面的示例如何从父组件调用 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>

React - class 的实例创建和使用

React - Instance creation and usage of a class

javascript

jsx

node.js

reactjs