阵营 - 一个类的实例创建和使用

我试图获取类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。

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

来源

2017-04-19 MrGuy

你不React_ _thinking - 您创建做出响应的组件应该有几个，如果有的话，必须方法类似。如果你想要一组函数，只需在模块中创建它们即可。什么是用例？ –

我们试图用一种方法来创建一个编辑器来保存任何内容 – MrGuy

我想你在这里想要的是将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>

来源

2017-04-19 09:10:47 thedude

阵营 - 一个类的实例创建和使用

回答

相关问题