既存のJSコードを反応定型文に追加する場所

Question

私はreact-boilerplateをしばらく抱きしめて、ドキュメントを読んで、ウェブを検索しました。私はいくつかのシンプルなコンポーネントとコンテナに問題はありませんでした。

DOMノードを作成し、javascriptを使用してそれらを返すコードが大量にあります。簡単例えば

function makeSomething(){  
     let div = document.createElement('div'); 
     div.innerHTML = 'where would this go in reactjs boilerplate'; 
     return div 
    } 

私のコードは、テーブルの行を追加する行と列の削除、列の移動、リモートソースからデータをフェッチ、DOM操作のトンを行います。 jQueryを使用するajax呼び出しを除いて、すべてjavascriptで書かれています。

私の質問は、どのように呼び出して、返されたノードをコンテナに配置するのですか？

export default class VendorsPage extends React.Component { // eslint-disable-line react/prefer-stateless-function 

    // Since state and props are static, 
    // there's no need to re-render this component 
    shouldComponentUpdate() { 
    return false; 
    } 
    renderdiv(){ 
    return 'hi there'; 
    } 
    render() { 
    return (
     <div>{this.renderdiv()}</div> 
    ); 
    } 
} 

：まあ、あなたの例でそれを行うだろう方法はとても似ている

export default class VendorsPage extends React.Component { // eslint-disable-line react/prefer-stateless-function 

    // Since state and props are static, 
    // there's no need to re-render this component 
    shouldComponentUpdate() { 
    return false; 
    } 
    renderdiv(){ 
    let div = document.createElement('div'); 
    div.innerHTML = 'hi there' 
     return div 
    } 
    render() { 
    return (
     //how do I put renderdiv in here 
    ); 
    } 
} 

Answer 1

：ここ

は、コンテナ内のノードを作成したjsファイルを追加しようとしているの簡略化した例でありますReactでタグの1つのペアで囲まれたものを返さなければならないので、通常はdivなどのデフォルトの囲みタグを持っていて、その中にレンダリングしたいものすべてを置くのが一番です。

renderdiv(){ 
    div = document.createElement('div'); 
    div.innerHTML = 'hi there' 
     return div 
    } 
    render() { 
    return (
     <div>{this.renderdiv()}</div> 
    ); 
    } 

を、あなたは親のdivを持っていると思い除いては、同じことをしたい：だから、あなたはそれが最初だったのと同じあなたrenderdiv（）関数を維持したい場合は、代わりにこのようにそれを行うことができます。あなたのコードをReact形式に変換してハイブリッドにならないようにしてください。