Question

请点击此链接查看错误：problem pic.gif。

这是一个反应和反应路由器应用程序。

左侧标签有一个“选定”的类别。（background-color: blue;和font-color: #fff）点击后。单击右侧的帖子时，右侧面板将加载帖子并删除左侧标签类。

App.js，右侧面板位于wrapper：

<div className="blog" id="blog">
    <Header BaseOrigin={ BaseOrigin } />
    <Tags BaseOrigin={ BaseOrigin }  nowTag={ this.state.nowTag } />
    <div className="wrapper" id="wrapper">
        {this.props.children}
    </div>
</div>

router.js（history=browserHistory）：

ReactDom.render(
    <Router history={history} onUpdate={() => window.scrollTo(0, 0)} >
        <Route path="/" component={App} BaseOrigin={BaseOrigin}>

            <Route path='article/:articleName' component={Content} />

            <Route path='tag/:tag' component={ List } params={{ tagMode: true }} />

            <Route path="*" component={ Test }/>

            <IndexRoute component={ List } />
        </Route>
    </Router>
    ,
    document.getElementById('qwe')
);

tag-block的CSS：

.blog .tag-box .tag-block {
    display: block
    line-height: 28px;
    border-bottom: 1px dotted rgba(0,0,0,0.1);
    padding: 7px;

    color: #666;
    background-color: #fff;

    -webkit-transition: background-color 0.2s, color 0.2s;
    -moz-transition: background-color 0.2s, color 0.2s;
    -ms-transition: background-color 0.2s, color 0.2s;
    -o-transition: background-color 0.2s, color 0.2s;
    transition: background-color 0.2s, color 0.2s;
}

.blog .tag-box .tag-block:hover,
.blog .tag-box .tag-block.selected {
    background-color: #38B7EA;
    color: #fff;
}

Chrome中的

错误：problem pic.gif

我尝试了4种方式：

删除componentWillUnmount

<List />

在onClick

<Link />

删除componentDidMount

<Content />

在App.js中添加回调：

<Tags BaseOrigin={ BaseOrigin }  nowTag={ this.state.nowTag } />
<div className="wrapper" id="wrapper">
    {this.props.children && React.cloneElement(this.props.children, {
        requestParent: this.setStateFromChild
    })}

</div>

当状态<List />更新时，它会调用requstParent()，然后<APP />会setState({nowTag: tag})将props传递给<Tags>

所有人都有错误。

我发现的一些事情：

当我们移除transition中的.tag-block时，它就有效。
~~在e.preventDefault()的{{1}}中添加OnClick，它也有效，但无法路由到文章页面。~~
~~添加<Link />，它也不起作用。~~
适用于Firefox。
在MacBook Pro 13上经常发生这种情况，在Windows Chrome中频繁发生。

版本

e.preventDefault();this.context.router.push('article')

转换时的chrome计算样式错误

0 个答案: