Question

我正在尝试嵌入光滑的组件渲染服务器端。我的代码几乎与代码示例相同：

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方法内创建的组件添加引用，或者您已加载多个React副本（详细信息：https://fb.me/react-refs-must-have-owner）。

我的npm列表反应显示react@0.14.7哪个应该没问题（没有不同的版本），我们使用webpack.optimize.DedupePlugin（）

Answer 1

找到解决方案：同样的问题，例如https://stackoverflow.com/a/31170775/888280

将这些行添加到webpack.config.js：

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

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

1 个答案: