React Package with Webpack - 只有 ReactOwner 可以有 refs

Question

我正在创建一个名为 Supernova 的反应包。因此，在我使用此包（带有 npm 链接）的其他项目中，此错误显示在控制台中：

只有 ReactOwner 可以有 refs。您可能正在将 ref 添加到 不是在组件的 render 方法中创建的组件， 或者你加载了多个 React 副本

这是我的 Supernova webpack 配置：

const webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  entry: './src/index.js',

  output: {
    library: 'Supernova',
    libraryTarget: 'umd',
    path: __dirname + '/build',
    filename: 'index.js',
  },

  externals: [
    {
      react: {
        root: 'React',
        commonjs2: 'react',
        commonjs: 'react',
        amd: 'react'
      }
    }
  ],

  module: {
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel' },
      {
        test:   /\.(scss|sass|css)$/,
        loader: ExtractTextPlugin.extract("style", "css!sass")
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=10000&name=fonts/[hash].[ext]'
      }
    ]
  },

  resolve: {
    extensions: ['', '.js', '.jsx']
  },

  node: {
    Buffer: false
  },

  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new ExtractTextPlugin("[name].css"),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

而我的组件方法render是：

  render() {
    return (
      <div className="sn-search-box">
        {this.renderSelecteds()}

        <input
          ref="input"
          type="text"
          className="sn-search-box__input"
          placeholder={this.props.label} autoComplete="off"
          onFocus={this.handleInputFocus.bind(this)}
          onBlur={this.handleInputBlur.bind(this)}/>

        <span className="sn-search-box__input--icon"></span>

        {this.state.hasFocus ? this.renderResults() : null}
        {this.renderHelpMessage()}
      </div>
    )
  }

我的超新星 package.json

"peerDependencies": {
    "react": "^15.3.0",
    "react-dom": "^15.3.0"
  },
  "dependencies": {
    "material-design-icons": "^2.2.3"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.7",
    "babel-cli": "^6.10.1",
    "babel-core": "^6.10.4",
    "babel-jest": "^13.2.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.9.0",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "jest-cli": "*",
    "node-sass": "^3.8.0",
    "react-addons-test-utils": "~15.1.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "react": "^15.3.0",
    "react-dom": "^15.3.0"
  },

Answer 1

这是因为在同一个项目中加载了多个 React 副本。当你的包有它自己的 React 副本并且你使用你的包的项目有另一个时，就会发生这种情况。

当你在 package(supernova) 中将 React 设置为 dependency 时，就会发生这种情况。你需要将 React 设为peerDependency。通过这样做，您的包将使用您项目中的 React。如果在项目中没有找到 React，npm 会在你执行 npm i supernova 时抛出错误/警告。

• npm peerDependencies