如何在 JSX 中使用 NPM 安装的 react 组件？答案

【问题标题】：How to use NPM installed react component in JSX?如何在 JSX 中使用 NPM 安装的 react 组件？
【发布时间】：2015-09-25 17:27:31
【问题描述】：

我正在尝试在我的 JSX 中使用第 3 方反应组件 (react-slick) 并遇到问题。我试图在应用程序创建者的this 示例中非常相似地使用它（example1.jsx sn-p 下面）。

每当我这样做时，我都会收到 2 个警告和一个错误：

警告：这个 JSX 使用普通函数。只有 React 组件在 React 的 JSX 转换中有效。警告：有些东西直接调用了 React 组件。请改用工厂或 JSX。见：http://fb.me/react-legacyfactory 未捕获的类型错误：无法读取 null 的属性“__reactAutoBindMap”

我也尝试过类似于example2.jsx 的方法，这是在另一个 Stack Overflow 问题中找到的解决方案。但是，虽然没有引发警告或错误，但在这种情况下，代码根本没有呈现。

我尝试了各种使用 React.createFactory 的方法（一开始不应该在 JSX 中使用），以及其他一些方法，但没有结果。

这可能是一个愚蠢的问题，但我到底如何在我的 JSX 中使用 NPM 安装的组件？

example1.jsx：

var React = require('react');
var Slider = require('react-slick');

var SingleItem = React.createClass({
  render: function () {
    var settings = {
      dots: true,
    }
    return (
      <div>
        <h3> Image slider with one item at a time</h3>
        <Slider dots={true}>
          <div><img src="/img/autumn.jpg" alt=""/></div>
          <div><img src="/img/sun.jpg" alt=""/></div>
        </Slider>
      </div>
    );
  }
});

var App = React.createClass({
  render: function () {
    return (
      <div className='container'>
        <SingleItem />
      </div>
    );
  }
});

example2.jsx：

var App = React.createClass({
  render: function () {
    return (
      <div className='container'>
        {SingleItem}
      </div>
    );
  }
});

【问题讨论】：

你用的是browserify还是webpack？
目前使用 webpack
不确定 react-slick 是否允许像使用dots = {true}一样直接应用设置，而不是您可以执行来引用设置对象设置渲染。

标签： reactjs

【解决方案1】：

看起来您实际上并没有引用滑块组件。您可能会发现您的解决方案看起来更像

var Slick = require('react-slick');
var Slider = Slick.Slider

使用调试器检查 require 实际给出的对象是什么。您也可能需要通过直接引用其中一个库文件来要求组件，例如

var Slider = require('./slider.jsx');

还可以查看 lib 或 dist 目录，您可以看到 module.exports 值满足您的需求。

【讨论】：

【解决方案2】：

使用它来包含 Slick Slider 组件：

var Slider = React.createFactory(require('react-slick'));

【讨论】：