Question

我正在尝试为我的React组件添加一些非常简单的点击导航。应用是一个可以呈现 Component1 或 Component2 的组件。 Component1 包含一个链接，点击该链接时应指示应用呈现 Component2 。

问题是，单击锚点时，会短暂显示 Component2 ，然后再次呈现 Component1 。由于某些无法解释的原因， App.render（）被调用两次：一次是 state.view ，一次是 Component2.render（）已被召唤。看来第二次 App.render（）被调用它有一个旧状态，所以它正在呈现 Component1 。

任何人都可以解释为什么第二次调用 App.render（）以及为什么在 Component2 之后呈现 Component1 渲染？

我知道我可以使用react-router来帮助我，但是对于我正在做的事情来说似乎有些过分了 - 而且我想理解为什么这不符合我的预期。

jsbin：http://jsbin.com/dosodeg/18

由于某种原因，Component1不会在jsbin或Stackoverflow的应用内预览窗格中重新渲染。而是简要显示Component2，然后页面变为空白。在单独的窗口中打开输出以查看实际行为。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>App</title>
  <meta name="description" content="Troubleshooting SPA Component Navigation in React">
  <meta name="author" content="Jeremy McLain">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser-polyfill.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var App = React.createClass({
  getInitialState: function () {
    return {
      view: <Component1 setView={this.setView} />
    };
  },
  setView: function(view) {
    switch(view) {
      case "component1":
        this.setState({view: <Component1 setView={this.setView} />});
        break;
      case "component2":
        this.setState({view: <Component2 setView={this.setView} />});
        break;
    }
  },
  render: function () {
    return (
      <div>
        <h3>App</h3>
        { this.state.view }
      </div>
    );
  }
});

var Component1 = React.createClass({
  component2Click: function(event) {
    this.props.setView("component2");
  },
  render: function () {
    return (
      <div>
        <h4>Component1</h4>
        <p><a href="" onClick={this.component2Click}>Component2</a></p>
      </div>
    );
  }
});

var Component2 = React.createClass({
  component1Click: function(event) {
    this.props.setView("component1");
  },
  render: function () {
    return (
      <div>
        <h4>Component2</h4>
        <p><a href="" onClick={this.component1Click}>Component1</a></p>
      </div>
    );
  }
});

ReactDOM.render(
  <App />
  , document.getElementById("container"));
</script>
</body>
</html>

Answer 1

您的链接有一个空的href。单击它们时，它会将当前URL更改为相同的值，从而触发重新加载。您可以删除href属性或在onClick处理程序中使用event.preventDefault（）。

简单的反应组件导航

1 个答案: