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

Question

我正在尝试嵌入 slick 组件呈现的服务器端。我的代码几乎与代码示例相同：

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>
        );
    }
};

我收到以下错误：

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 (details: https://fb.me/react-refs-must-have-owner)

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

Answer 1

找到解决方案：与此处相同的问题

将此行添加到 webpack.config.js：

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

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

React-Slick error when embedding on server side

reactjs

slick.js