一般代码审核

Question

我必须处理一个编辑幻灯片的小型react + typescript（1.6）应用程序。

所以应用很简单。在左侧，我有一个侧边栏，可以渲染所有现有的幻灯片，点击后，它会在右侧加载画布，用户可以在其中编辑内容。

此外，用户可以将幻灯片标记为＆＃34;隐藏＆＃34;或者删除它。

代码如下所示：

renderSlide(item: SlideBaseModel.Slide, index: number): JSX.Element {
    let cx = React.addons.classSet;
    let _classes = cx({
        "fa": true,
        "fa-eye": !item.visible,
        "fa-eye-slash": item.visible
    });

    return (
        <li className="slide-item"  draggable={true} onClick={this.onSlideClick.bind(this)} key={item.id}>
            <div className="index">{index + 1}</div>
            <div className="control remove" onClick={this.onRemoveSlideClick.bind(this)}>
                <i className="fa fa-times"></i>
            </div>
            <div className="control toggle-visibility" onClick={this.onToggleSlideVisibility.bind(this)}>
                <i className={_classes}></i>
                </div>
            <SlideComponent
                type={item.type}
                title={item.title}
                visible={item.visible}
                content={item.content}
                path={item.path}/>
        </li>);
}

render() {
    let _slides = this.state.slides.map(this.renderSlide, this);
    let cx = React.addons.classSet;
    let classes = cx({
        "sidebar": true,
        "sidebar-visible": this.props.visible
    });

    return (<ul className={classes}>
            {_slides}
            <li className="slide-item slide-add" onClick={this.onAddSlideClick.bind(this) }></li>
        </ul>);
}

现在，每当我点击＆＃34; renderSlide＆＃34;中的任何绑定onClick的方法时方法，事件没有被触发。

我尝试过这样的事情：

onClick={(e) => {console.log(e)}}

并且问题仍然存在。

我尝试创建一个数组并将其填充到forEach中，而不是map，但它不起作用。如果我在render方法中调用this.renderSlide(this.state.slides[0])，事件就会起作用，因此它必须是与数组相关的东西。

其他代码

滑动道具

interface SlideProps {
    type: Enums.SlideType;
    title: string;
    content?: string;
    path?: string;
    visible: boolean;
}

生成的JS代码

Sidebar.prototype.renderSlide = function (item, index) {
    var itemData;
    var cx = React.addons.classSet;
    var _classes = cx({
        "fa": true,
        "fa-eye": !item.visible,
        "fa-eye-slash": item.visible
    });
    return (React.createElement("li", {"className": "slide-item", "draggable": true, "onClick": this.onSlideClick.bind(this), "key": item.id}, React.createElement("div", {"className": "index"}, index + 1), React.createElement("div", {"className": "control remove", "onClick": this.onRemoveSlideClick.bind(this)}, React.createElement("i", {"className": "fa fa-times"})), React.createElement("div", {"className": "control toggle-visibility", "onClick": this.onToggleSlideVisibility.bind(this)}, React.createElement("i", {"className": _classes})), React.createElement(SlideComponent, {"type": itemData.type, "title": itemData.title, "visible": itemData.visible, "content": itemData.content, "path": itemData.path})));
};
Sidebar.prototype.render = function () {
    var _slides = this.state.slides.map(this.renderSlide, this);
    var cx = React.addons.classSet;
    var classes = cx({
        "sidebar": true,
        "sidebar-visible": this.props.visible
    });
    return (React.createElement("ul", {"className": classes}, _slides, React.createElement("li", {"className": "slide-item slide-add", "onClick": this.onAddSlideClick.bind(this)})));
};

提前感谢您的帮助：）

更新1

我试图查看是否为这些元素调用了EventPluginHub.putListener（并使用了什么参数），但事实并非如此。我尝试了Basarat的建议并且问题仍然存在。

我在这里看不到问题。：（

Answer 1

事件有效，所以它必须是与数组相关的东西

也许key不是唯一的。考虑一下：<li className="slide-item" draggable={true} onClick={this.onSlideClick.bind(this)} key={index}>

一般代码审核

请注意bind被视为有害，因为您失去了任何类型的安全性。这是来自lib.d.ts

的签名

bind(thisArg: any, ...argArray: any[]): any;

如您所见，它会返回any。删除它可能有助于找到代码中的其他输入错误。

renderSlide(item: SlideBaseModel.Slide, index: number): JSX.Element {和this.state.slides.map(this.renderSlide, this);

建议您使用renderSlide = (item: SlideBaseModel.Slide, index: number): JSX.Element => {和this.state.slides.map(this.renderSlide);

Answer 2

发现了这个问题。这是因为我在componentDidMount方法中检索了数据而不是初始化（是的，我是新手）。

现在我有另一个与此相关的问题，但我会发布另一个问题。

React不会触发绑定到数组映射中创建的JSX Elements的事件

2 个答案:

一般代码审核