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();
}

但它总是变成null / undefined。

我知道它不是最好的例子，但应该足以证明这个问题。
有没有办法解决这个问题？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

React - 实例的创建和使用

1 个答案: