Question

我已经完成了一项任务，我必须在div中显示不同的组件，具体取决于点击菜单。以前那些显示在选项卡中（并且它们工作正常）现在我必须删除选项卡和显示菜单。我的代码就是这个

handleClick: function (name) {
     ReactDOM.unmountComponentAtNode(document.getElementById('main_data'));
        if (name == 'projects') {
            ReactDOM.render(<ListProjects parentThis = {this} />, document.getElementById('main_data'))
        }
        else if (name == 'profile') {
            ReactDOM.render(<div className="inner clearfix">
                    <Avatar parentThis = {this}/>
                            </div>,
                document.getElementById('main_data'))
        }

render: function () {
return (
<div className="row">
                        <div className="col-sm-12">
                            <div className="user-menu">
                                <ul className="dropdown clearfix boxed">
                                    <li key="1"><a href="#" onClick={()=>this.handleClick('projects')}><span>Projects</span></a></li>
                                    <li key="2"><a href="#" onClick={()=>this.handleClick('profile')}><span>Profile</span></a></li>
                                </ul>
                            </div>
                            <div id="main_data">
                              <ListProjects parentThis = {this} />
                            </div>
                        </div>
                    </div>
)
}

问题是当我点击菜单链接组件时出现并立即消失并显示默认组件。无法在线找到任何具体的解决方案，所以请帮助我做错了。

Answer 1

问题在于，当我们点击href链接时，由于其默认行为页面刷新并且组件出现并消失，然后显示默认组件。它的解决方案是我们在点击时传递事件，然后阻止其默认行为，如下面的

<li key="2"><a href="#" onClick={(evt)=>this.handleClick(evt, 'profile')}><span>Profile</span></a></li>

handleClick: function (event, name) {
        event.preventDefault();
        ...
}

Answer 2

我认为这是因为您卸载了您尝试重新渲染到

的节点

 ReactDOM.unmountComponentAtNode(document.getElementById('main_data'));
    if (name == 'projects') {
        ReactDOM.render(<ListProjects parentThis = {this} />, document.getElementById('main_data'))
    }

我在想，因为你正在卸载id ='main_data'的节点，然后再尝试再次安装它，你会看到闪存。

Answer 3

这是旧的，但是在这里，ma贡献：在symfony 3 + react的上下文中，我遇到了相同的问题，服务器端和客户端都渲染。基于此示例：https://github.com/Limenius/symfony-react-sandbox

加载页面时，内容正确，但是几毫秒后，内容消失了。该错误是基于以下事实：我为客户端错误配置了路由器。因此，服务器生成的内容很好，但是当客户端进行渲染时，它找不到走的路，所以请给我一个空白页。

经过翻译的代码意味着basename由我的<StaticRouter>配置良好，但在我的<BrowserRouter>中却是错误的。

Answer 4

这是您需要让React管理Dom节点的安装和卸载的简单原因。

只需创建一些状态（我想您是在类组件中）：

state={ selectedUi: undefined }

然后在handleClick()内，您需要更新状态：

this.setState({ selectedUi: name })

现在，您只需要一个JavaScript快捷方式来描述您的用户界面，因此对于projects，当您单击它时，您的状态应根据以下代码进行更新并显示：

{this.state.selectedUi === “projects” && <ListProjects />}

因此，可以得出结论，当您单击其他值并更改状态时，表达式将变为false，React将从dom中删除。

这意味着您的处理程序函数现在应该很小：

handleOnClick = name => this.setState({ selectedUi: name });

Answer 5

我的问题是我返回了两次内容。我的这个 if 语句同时在我的两个组件中包含了 return Redirect，这导致了错误。

render() {
  if (this.props.isAuthenticated) {
    return <Redirect to="/" />;
  }
  return (.....)
}

React组件会立即出现并消失

5 个答案: