如何在React/JSX文件中添加腳本標記？

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

你需要做的是codesplitting。

沒有代碼分裂

+在第一次啓動

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

在我看來，添加腳本是一個壞主意，代碼味道，但也許你可以嘗試這樣的事情？

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

這僅僅是一個主要的代碼的一部分。我正在製作一個設置頁面。所以當我點擊設置選項時，它應該呈現這個頁面以及JavaScript。所以我只想在點擊這個方法時加載JavaScript。那麼我應該在哪裏添加這個？ –

'componentWillMount'是一個反應[生命週期方法]（https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle）。如果你有SettingsPage組件，使它成爲一個基於類的組件，並添加我的例子中的代碼（我更新了答案）。在SettingsPage安裝之前，它會將

11. 如何在腳本編輯器中添加腳本標籤？

12. 如何通過inline腳本添加腳本標籤在Thymeleaf中？

13. 如何檢查reactjsx中的條件？

14. 不能使用腳本標記添加js文件

15. 從腳本標記添加JavaScript文件打破jQuery UI

16. 如何在asp.net用戶控件中動態添加腳本標記？

17. 如何添加腳本標記中其顯示

18. Asp.net：如何在腳本標記內添加使用

19. 在javascript文件中添加元標記

20. 將腳本標記添加到magento layout.xml

21. CahePHP向腳本標記添加異步

22. 添加LD + JSON腳本標記

23. Jquery $ .getJSON添加腳本標記

24. 在powershell中添加腳本到文件

25. 如何在腳本中標記處理過的文件夾？

26. 如何在div標記中添加文本

27. 在正文標記結束之前添加腳本標記（不工作）

28. 如何重新加載腳本標記

29. 如何在腳本中添加社交圖標的頁腳？

30. 如何在htaceess文件中添加php標記

如何在React/JSX文件中添加腳本標記？

回答

相關問題