React: 使用 React.addons.CSSTransitionGroup 添加一个额外的<span>?</span>

创建于 2015-06-20  ·  3评论  ·  资料来源: facebook/react

这里可能是用户错误,但也可能不是。 如果重要的话,使用 ECMA2015 + babel。

return (
            <div className={curtainClasses} style={this.props.curtainClass ? null : curtainStyle} onClick={this.props.clickHandler}>
                <div key="_srm-modal" style={this.props.modalClass ? null : modalStyle} className={modalClasses}>
                    {this.props.children}
                </div>
            </div>
        );

呈现(在我的应用程序中):

<div class="_srm-curtain modal-background" data-reactid=".0.0.1.1.0.0">
    <div class="modal-pod" data-reactid=".0.0.1.1.0.0.$_srm-modal">
        <h1 data-reactid=".0.0.1.1.0.0.$_srm-modal.0">Hello World</h1>
    </div>
</div>

但是,如果我尝试使用 CSSTransitionGroup:

    let ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
        return (
            <div className={curtainClasses} style={this.props.curtainClass ? null : curtainStyle} onClick={this.props.clickHandler}>
                <ReactCSSTransitionGroup transitionName={this.props.transitionName}>
                    <div key="_srm-modal" style={this.props.modalClass ? null : modalStyle} className={modalClasses}>
                        {this.props.children}
                    </div>
                </ReactCSSTransitionGroup>
            </div>
        );

使用这些额外的跨度进行渲染:

<div class="_srm-curtain modal-background" data-reactid=".0.0.1.1.0.0">
    <span data-reactid=".0.0.1.1.0.0.0">
        <div class="modal-pod" data-reactid=".0.0.1.1.0.0.0.$=1$_srm-modal">
            <h1 data-reactid=".0.0.1.1.0.0.0.$=1$_srm-modal.0">Hello World</h1>
        </div>
    </span>
</div>

如果我做错了什么,请指出我正确的方向! 也许我错过了文档中的注释!

谢谢大家,继续努力!

最有用的评论

这个问题可能已经解决了,但是使用 React.Fragment 作为组件属性为我解决了这个问题。

<ReactCSSTransitionGroup
    component={React.Fragment}
    transitionName="slide"
    transitionEnterTimeout={500}
    transitionLeaveTimeout={500}
 >
 ....
</ReactCSSTransitionGroup>

所有3条评论

我相信这是CSSTransitionGroup记录行为

非常感谢! 我错过了那个署名! @garetht

这个问题可能已经解决了,但是使用 React.Fragment 作为组件属性为我解决了这个问题。

<ReactCSSTransitionGroup
    component={React.Fragment}
    transitionName="slide"
    transitionEnterTimeout={500}
    transitionLeaveTimeout={500}
 >
 ....
</ReactCSSTransitionGroup>
此页面是否有帮助?
0 / 5 - 0 等级