Question

我正在使用我的应用程序进行服务器渲染，并在使用名为react-dragula的拖拉库的反应扩展时遇到了问题

这里的问题在于

import Dragula from 'react-dragula';

由于某些原因，这使用document因此在服务器端呈现期间导致错误，因为文档不存在，因此我需要一种方法只在document可用时包含它，以便我可以开始使用它。

Answer 1

没有办法有条件地import某事，但有办法解决。我通常会遇到这样的问题的方法是为服务器和客户端使用创建单独的构建，并使用process.env变量来区分构建过程中的两个。它不会对您的代码进行太多更改，但这样可以在某种程度上模拟依赖项。

你可以这样做：

import Dragula from './my-dragula-wrapper'

在您的包装器文件中，使用CommonJS require返回正确的模块：

/* my-dragula-wrapper.js */
if(process.env.SOME_VAR === 'server'){
  module.exports = function(){}; // Or something, it's not going to be used anyway
} else {
  module.exports = require('react-dragula');
}

然后，只需在构建过程中设置正确的process.env.SOME_VAR值，无论是Gulp还是Grunt，或者本周的任何内容都很酷。

gulp.task('env:server', function(){
    return process.env.SOME_VAR = 'server';
});

gulp.task('env:client', function(){
        return process.env.SOME_VAR = 'client';
});

将此选项与Browserify的Envify转换或类似方法一起使用。你应该做得很好。

Answer 2

我不知道这是不是一个好习惯。但你可以这样做，

sed 's/\(key \)\([0-9]\)/key_\2/g;s/\(key_[0-9]\)\(:\)\(value[0-9]\)\([,]*\)/\3\2\1\4/g' <<< "key 1:value1,key 2:value2,key 3:value3"

这只会在客户端导入dragula。组件确实挂载永远不会从服务器端运行您必须在渲染函数中包含检查，以查看Dragula是否存在。但这样的事情会起作用。我刚做了。
我做的是，

<?php
  $selected = array();
  $selected = explode(",",$fill['markets']);

  $condb = mysql_query("SELECT * FROM `countries`");
  $count = mysql_num_rows($condb);
  $countries = array();
  $str;

  while ($countries = mysql_fetch_array($condb))
  {
    $str = "option{$countries['id']}";
    echo "<option value='{$str}' ";
    if(in_array($str,$selected)) {
      echo "selected>";
      echo $countries['country'];
      echo "</option>";
    } else {
      echo ">";
      echo $countries['country'];
      echo "</option>";
    }
  }      
  ?>

Answer 3

添加dannyjolie建议。

您可以使用try catch而不是在gulp / grunt中设置

try {
  if(window) 
     module.exports = require('react-dragula');
}  
catch(ex) 
{
 module.exports = function(){};
}

仅在文档存在时导入库（不在服务器上）

3 个答案: