嵌入服务器端时出现 React-Slick 错误答案

【问题标题】：React-Slick error when embedding on server side嵌入服务器端时出现 React-Slick 错误
【发布时间】：2016-05-22 14:34:06
【问题描述】：

我正在尝试嵌入呈现服务器端的光滑组件。我的代码几乎和代码示例一样：

import React from 'react';
import Slider from 'react-slick';

export default class Carousel extends React.Component {

    render() {
        const settings = {
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1
        };
        return (
            <Slider {...settings}>
                <div><h3>1</h3></div>
                <div><h3>2</h3></div>
                <div><h3>3</h3></div>
                <div><h3>4</h3></div>
                <div><h3>5</h3></div>
                <div><h3>6</h3></div>
            </Slider>
        );
    }
};

这里是使用组件：

import React from 'react';
import Footer from './Footer.jsx';

import { Header } from 'web-components';
import { Carousel } from 'web-components';

module.exports = class extends React.Component {
    render() {
        return (
            <div id="mxd-full-page-wrapper">
                <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.3.15/slick.css" />
                <Header fixPage={ function () {} } unfixPage={ function () {} }/>
                <Carousel/>
                <Footer/>
            </div>
        );
    }
};

我收到以下错误：

错误：addComponentAsRefTo(...)：只有 ReactOwner 可以有 refs。您可能正在向未在组件的 `render` 方法中创建的组件添加 ref，或者您加载了多个 React 副本（详细信息：https://fb.me/react-refs-must-have-owner）

我的 NPM 列表 react 显示 react@0.14.7 应该没问题（没有不同的版本），我们使用 webpack.optimize.DedupePlugin()。

【问题讨论】：

标签： reactjs slick.js

【解决方案1】：

找到了解决方案：同样的问题在这里https://stackoverflow.com/a/31170775/888280

在 webpack.config.js 中添加了这一行：

resolve: {
        alias: {
            react: __dirname + '/node_modules/react'
        },

【讨论】：