外部からの反応成分を呼び出す

Question

外部から反応成分を呼び出すことは可能ですか？例えば

HTML

<div id='react-app'></div> 

<button onClick=callReactModal()>PressME</button> 

私は

let callReactModal = function() { 
    console.log('clicked'); 
    //Navigation.sayHello(); 
} 

class Navigation extends React.Component<any, any> { 

    constructor(props:any){ 
    super(props); 

    this.state = { 
     language: { 
     lang: cookie.load('lang') || '' 
     } 
    }; 
    this.click = this.click.bind(this); 
    } 

    sayHello =() => { 
    alert("Hello"); 
    } 
} 

メソッドをコールしたい私は、他のコンポーネントからモーダルを呼び出す必要がありますが、私は達成する方法がわからない私のコンポーネントそれ。

状態

handleOpen = (e) => this.setState({ 
     modalOpen: true, 
    }) 

modalPart

を使用しています

方法それは（意味-UIを使用して）モーダルを開く必要クラスの更新stateとWarning: setState(...): Can only update a mounted or mounting component.を取得メソッドを呼び出ししようとすると

<Modal size='small' open={this.state.modalOpen} onClose={this.handleClose} trigger={<a className="btn btn-base" onClick={this.handleOpen}>Login</a>} closeIcon='close'> 

ありがとうございます助けて！

Answer 1

のベストプラクティスではありませんが。あなたは窓

window.callReactModal = function() { 
    console.log('clicked'); 
    //Navigation.sayHello(); 
} 

それを実装するためのより良い方法でcallReactModal機能を設定する必要があり、トリガーされたとき、モーダルを開くイベントリスナーを作成することです。

Answer 2

いいえ、不可能です。すべての "カスタムタグ"（React Components）は、JSX内にある必要があります。あなたがしたい場合しかし、あなたは、複数のレンダリングできるページあたりのアプリケーションに反応：

<div id='react-app'></div>  
<div id='react-button'></div>