“只有 ReactOwner 可以拥有 refs”尽管运行了一个 react 副本并且没有损坏的 refs

Question

我会变老

invariant.js:44 Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded

refs 绝对不是问题（它们在 render 方法中，并且在它们被删除后问题仍然存在）。我也没有多个 react 副本 - node_modules 中没有一个额外的副本，npm ls react 返回一个实例，我没有安装 react 插件。我正在使用 webpack。

在 webpack 配置中添加别名没有帮助，重新安装依赖项没有帮助，从 npm/webpack 外部删除 react 并链接它没有帮助。

这是我的 webpack 配置：

module.exports = {
    watch: true,
    entry: "./components/FreshInvestigationForm/FreshInvestigationForm.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    devtool: "source-map",    
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json", "css"]
    },    
    module: {
        rules: [
            {
                test: /\.ts|\.tsx$/,
                use: ["babel-loader","awesome-typescript-loader"]
            },
            {
                test: /\.css?$/,
                use: ["css-loader"]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: 'file-loader?name=public/fonts/[name].[ext]'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: ['file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false']
            },
            {
                enforce: "pre",
                test: /\.js$|\.jsx$/,
                use: ["babel-loader", "source-map-loader"]
            }
        ]
    }
};

和我的依赖

 "dependencies": {
    "@types/react": "15.0.30",
    "@types/react-dom": "^15.5.1",
    "awesome-typescript-loader": "^3.2.1",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "source-map": "^0.5.6",
    "style-loader": "^0.18.2",
    "typescript": "^2.4.2"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-runtime": "^6.23.0",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "image-webpack-loader": "^3.3.1",
    "source-map-loader": "^0.2.1",
    "typescript-simple-loader": "^0.3.8",
    "webpack": "^3.3.0"
  }

另外，这是一个多么可怕的错误，几乎每个解决它的人都以不同的方式做到了。

编辑：

我已经设法在一定程度上缩小了问题的范围，有几个组件会触发错误，但我无法确定问题所在。它们都在同一个地方被调用，如下所示：

listToRender.forEach((item: field, index: number) => {
            const subGroup: Object = item.hasOwnProperty("subGroup") ? item.subGroup : null;
            const isDropdown = this.state.dropdowns[item.value] !== undefined;
            const isSearchDropdown = this.state.searchDropdowns.indexOf(item.value) > -1;
            const isMultiYear = this.state.multiYear.indexOf(item.value) > -1;
            const isMultipleSelection = this.state.multipleSelectionDropdowns.indexOf(item.value) > -1;
             if (isSearchDropdown) {
                listElems.push(<SearchSelectFormElem /> }
else {and so on for other possibilities}
return(<ul>{listToRender}</ul>)

这是最短的违规组件之一。不要被它有一个 ref 所误导，删除它不会改变任何事情

import * as React from "react";
var $: any = $;

export interface IProps {
    givenId: string;
    specialType: string;
    inputValue?: string;
    updateModel: Function;
}

export default class SearchSelectFormElem extends React.Component<IProps, { selectNode: any }> {
    private searchSelect: HTMLSelectElement;
    showDropdown() {
        $(this.searchSelect).select2("open");
    }
    componentDidMount() {
        $(this.searchSelect).select2({ selec2 options });
    }
    render() {
        let fieldLabel: string = this.props.givenId;
        fieldLabel = fieldLabel.replace(/([A-Z])/g, ' $1').trim();

        return (
            <li className="form-list-elem has-special-input dropdown">
                <label htmlFor={this.props.givenId} className="form-label">
                    {fieldLabel}
                </label>
                <div className="special-wrapper">
                    <select ref={(node) => {this.searchSelect = node}} className="form-input main-form-input select2picker search-dropdown" id={this.props.givenId}>
                        <option>{this.props.inputValue}</option>
                    </select>
                    <span className="special-control dropdown" onClick={this.showDropdown.bind(this)}></span>
                </div>
            </li>
        );
    }
}

Answer 1

正如我之前所写的，这个错误很可怕，而且错误信息也无济于事。

实际原因是 jquery（项目正在迁移以响应但依赖于一些 jquery 插件）。尽管工作正常，但 react 只允许通过导入调用它。一旦我开始这样称呼它

import * as $ from 'jquery'

应用又开始工作了。