javascript - React - 我能知道一个组件当前是否可见吗

Question

当使用 React 时，我的页面上的组件会根据用户导航到的路径而发生变化，有没有办法检测组件当前是否正在显示？例如，当用户在任何不是主页的页面上时，“返回主页”按钮将显示，但我想在用户导航回主页时将其删除(它不是那么简单，但就是这样总体思路)

Answer 1

我假设您的按钮已经是子组件，如果它们已通过事件处理程序。也许是时候让它们充实一点了。

class GoHome extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    visible: "shown"
  }
  // While the code here would execute just prior to render,
  // which I assume would happen during page load and after url change,
  // you could place it in a function the serves as a callback
  // to any route change event.
  componentWillMount = () => {
    // Please check this regex.
    var re = /\/home/i;
    if (re.test(window.location.href)) {
      this.setState({
        visible: "not-shown"
      });
    };
  }
  // Using Google's Material Icons as an example.
  render () {
    let myClass = "material-icons " + {this.state.visible};
    return (
      <i className={myClass}>home</i>
    )
  }
}

CSS 类。

.shown {
  display: block; // Or inline-block, what-have-you.
}

.not-shown {
  display: none;
}

本质上，按钮的 CSS 类将根据当前浏览器 URL 而不同。