React/JSXファイルにscriptタグを追加するには？

private get mouseGestureSettingView() { 
 
    const {selectedMenu} = this.state; 
 
    return (selectedMenu == 2 ? 
 
     <script src="../../assets/js/extensions/mouse-gesture/options.js"></script> 
 
     
 
    <div className={styles.settingForm}> 
 
     <h3>Mouse Gesture</h3> 
 
        <div className={options.opts}> 
 
      <div className={options.opttitle} data-i18ninner={'newadd'}></div> 
 
      <div className={options.optcontent}> 
 
       <form> 
 
        <input id={'addgesture'} className={options.newadd} type={'button'} value={'newgesturess'}/> 
 
       </form> 
 
      </div> 
 
     </div> 
 
     <div className={options.opts}> 
 
      <div className={options.opttitle} data-i18ninner={'editgesture'}></div> 
 
      <div className={options.optcontent} id={'editgesture'}></div> 
 
     </div> 
 
     <div style={{clear:'both'}}></div> 
 
     </div> 
 
     : null 
 
    ); 
 
    }

私が反応コンポーネントにインラインスクリプトを使用します。私はこのようにしています。私のアプローチは何ですか？私は多くの情報を見つけることができませんでした。このコンポーネントがアプリページで選択されているときにスクリプトを読み込みたいです。

出典

2017-08-17 Ankur Sardar

あなたがする必要があるのはコード分割です。コード分割なし

+コード分割して最初のスタート

import Login from './Login' 
import Home from './Home' 

const App = ({ user }) => (
    <Body> 
    {user.loggedIn ? <Route path="/" component={Home} /> : <Redirect to="/login" />} 
    <Route path="/login" component={Login} /> 
    </Body> 
)

にロードされます。

import Async from 'react-code-splitting' 

import Login from './Login' 
const Home =() => <Async load={import('./Home')} /> 
const LostPassword = props => <Async load={import('./LostPassword')} componentProps={props}/> 

const App = ({ user }) => (
    <Body> 
    {user.loggedIn ? <Route path="/" component={Home} /> : <Redirect to="/login" />} 
    <Route path="/login" component={Login} /> 
    <Route path="/lostpassword" component={LostPassword} /> 
    </Body> 
)

これにはいくつかの方法は、例えば、ありますhttps://github.com/didierfranc/react-code-splitting

出典

2017-08-17 13:02:59 joeydebreuk

私の意見では、スクリプトを追加することは悪い考えであり、コードのにおいが、おそらくあなたはこれのようなものを試すことができますか？カスタムスクリプトやカスタムCSSを追加するための特定のjsファイルの一番上に

class SettingsPage extends React.Component { 
    componentWillMount() { 
    const script = document.createElement("script"); 

    script.src = "yourSrciptPath"; 
    script.async = true; 

    document.body.appendChild(script); 
    } 
}

出典

2017-08-17 13:04:35 mradziwon

これは、メインのコードのほんの一部です。私は1つの設定ページを作っています。だから私は設定オプションをクリックすると、それはJavaScriptと一緒にこのページをレンダリングする必要があります。だから私はこのメソッドをクリックしたときにJavaScriptをロードしたい。だから私はこれをどこに加えるべきですか？ –

'componentWillMount'は反応[lifecycleメソッド]（https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle）です。 SettingsPageコンポーネントをお持ちの場合は、それをクラスベースのコンポーネントにして、私の例のコードを追加します（私は答えを更新しました）。 SettingsPageがマウントされる前に、ドキュメントのボディに

11. knp menu bundle - タグにタグを追加するには？

12. <script>タグの後にHTML要素が追加される理由

13. divタグにhtmlファイルを追加するjquery

14. perlを使ってXMLファイルにタグと属性を追加するには？

15. シェルスクリプトを使用してxmlファイルに新しいタグを追加するには？

16. bodyタグにクラスを追加

17. divタグにリンクを追加

18. 外部<script>にajaxリクエスト後にデータパラメータを追加する

19. headタグにスクリプトを追加する

20. BeautifulSoup - タグに属性を追加する

21. テキストにHTMLタグを追加する

22. HTMLタグにPHPを追加する