Question

作为我的应用程序的一部分，我有一个标签，如下所示。我是否想知道如何将其转换为react？

我可以将其分离为一个javascript文件并将其加载到此文件中吗？如果答案是肯定的，您能告诉我如何做吗？

  class App扩展了组件{
  render（）{
    返回（
      
  
        
            工具箱
            
                
                    
                        项目1 
                        项目2 

                    
                
            
        
        
            
                在此处复制项目
                 
            
        

    


    <脚本>
        sortable（'。js-sortable-copy'，{
            forcePlaceholderSize：true，
            复制：真实，
            acceptFrom：否，
            placeholderClass：'mb1 bg-navy border border-yellow'，
        }）;
        sortable（'。js-sortable-copy-target'，{
            forcePlaceholderSize：true，
            acceptFrom：'.js-sortable-copy，.js-sortable-copy-target'，
            placeholderClass：'mb1 border border-maroon'，
        }）;
        sortable（'。js-grid'，{
            forcePlaceholderSize：true，
            placeholderClass：'col col-4 border border-maroon'
        }）;
    
      
    ）;
  }
}

导出默认应用程序；

Answer 1

您可以在componentDidMount挂接中调用它们：

mySortable() {
  // sortable() scripts
}

componentDidMount() {
  window.addEventListener('onload', this.mySortable)
}

然后确保删除componentWillUnmount钩中的侦听器：

componentWillUnmount() {
  window.removeEventListener('onload', this.mySortable)
}

Answer 2

我将检查您在该脚本中使用的库是否有npm软件包，然后将其导入该组件。例如，如果这是sortable.js，则为https://www.npmjs.com/package/sortablejs。这使事情变得更加模块化。

否则，我将使用函数创建一个单独的文件并将其导入并通过在生命周期方法（componentDidMount或render [depending]）中通过函数运行数据/元素将它们附加到需要使用它们的元素上属性，例如onHover，onClick等。

如果它们是整个Web应用程序的功能，则将脚本标记复制到index.html文件中。

如何在反应中转换<script>标签？

在此处复制项目

2 个答案: