Question

我用React组件创建了一个jsx文件。我可以在当地要求，一切正常。但是，当我通过执行npm install react-tabs-component使用我发布到npm的版本时，渲染不会触发任何事件处理程序。没有错误或警告。

我认为代码没有任何问题，因为它在本地工作，并通过了一个完整的测试套件。

我认为我的package.json一定做错了：

    {
      "name": "react-tabs-component",
      "version": "1.1.1",
      "description": "Tabs Component for React with the simplest API",
      "keywords": [
        "React",
        "tabs",
        "tab",
        "component"
      ],
      "repository": {
        "type": "git",
        "url": "https://github.com/mheiber/react-tabs-component"
      },
      "main": "Tabs.js",
      "dependencies": {
        "envify": "^3.4.0",
        "react": "^0.12.0",
        "reactify": "^1.1.0"
      },
      "author": "Max Heiber",
      "browserify": {
        "transform": [
          "reactify"
        ]
      },
      "scripts": {
        "test": "jest"
      },
      "jest": {
        "rootDir": "./",
        "scriptPreprocessor": "./jest-preprocessor.js",
        "unmockedModulePathPatterns": [
          "react",
          "./node_modules/react/"
        ]
      },
  "devDependencies": {
        "jest-cli": "0.4.0",
        "react-tools": "0.13.1",
        "reactify": "1.1.0"
      },
      "bugs": {
    "url": "https://github.com/mheiber/react-tabs-component/issues"
      },
      "homepage": "https://github.com/mheiber/react-tabs-component",
      "directories": {
        "example": "examples"
      },
     "license": "ISC"
     }

以下是软件包代码的简化版本：

var React = require('react/addons');

var getChildrenArray = function(context){
    var children = [];
    React.Children.forEach(context.props.children,function(child){
        children.push(child);
    });
    return children;
};

var noop = function(){};

var Tabs = React.createClass({
    propTypes:{
        defaultTabNum: React.PropTypes.number,
    },
    getDefaultProps: function(){
        return {
            defaultTabNum: 0
        };
    },
    getInitialState: function(){
        return {activeTabNum: this.props.defaultTabNum};
    },
    setActiveTabNum: function(num,callback){
        this.setState({activeTabNum: num},callback);
    },
    getActiveTabNum: function(){
        return this.state.activeTabNum;
    },
    _change: function(e){
        this.setActiveTabNum(newActiveTabNum,callback);
    },
    render: function(){
        var children = getChildrenArray(this);
        var activeTabContent = children[this.state.activeTabNum];

        var tabs = this.props.tabNames.map(function(tabName,tabNum){
            var isActive = (tabNum === this.state.activeTabNum);
            return (
                <span 
                    key={'tab-'+tabNum}
                    data-tabnum={tabNum}
                    onClick={this._change}
                >
                    {tabName}
                </span>

                    );
        }.bind(this));

        return (
            <div>
            <nav>{tabs}</nav>
            {activeTabContent}
            </div>
        );
    }
});

module.exports = Tabs;

以下是当Tabs.js位于同一目录时有效的代码，但是当我npm install使用node_modules中的版本时，这不是：

var Tabs=require('react-tabs-component');
var React=require('react');

React.render(
  <Tabs tabNames={[1, 2, 3]}>
    <p>1</p><p>2</p><p>3</p>
  </Tabs>,
  document.getElementById('react')
);

我正在使用Browserify和Reactify。

我知道我可能会因为发布这么多代码而被拒绝投票，但是我不想通过使用许多不起作用的软件包来测试npm。谢谢你的帮助。

使用来自npm的代码时，React事件处理程序不会触发

0 个答案: