小编Nex*_*xus的帖子

我通过主渲染函数中的状态和 switch 语句控制应在应用程序屏幕上显示哪些组件。我正在用反应本机写这篇文章，但这是一个反应结构问题。

我还有一个导航栏组件，理想情况下我希望仅在用户单击导航栏本身中的链接时重新呈现，但我不知道现在如何设置 switch 语句来实现此目的，它似乎我每次都必须重新渲染导航栏，具体取决于状态满足的条件。

我的问题是，有没有一种方法可以让我仍然可以在渲染方法中使用组件的条件渲染，就像下面一样，并且有一个组件始终渲染在屏幕顶部，例如导航栏？我知道使用 React Router 这样的东西是可能的，但是有没有更好的方法来构造它，而无需使用像 React Router 这样的工具或每次都必须重新渲染 NavBar 组件？

import React from 'react';

import GPS from './GPS/gps';
import Home from './Home';
import Photo from './Camera/Photo';

export default class App extends React.Component {
  constructor() {
    super();

    this.state = {
      hasCameraPermission: null,
      type: Camera.Constants.Type.back,
      currentView: null,
      currentImage: null,
      navigation: 'Overview'
    };

    this.updateNavigation = this.updateNavigation.bind(this);
  }

  updateNavigation(view) { //Update view function
    this.setState({currentView: view});
  }


  render() {
    const { currentView } = this.state;

    switch(currentView) {
      case null:
      return …

我正在尝试配置 webpack 将自定义 SCSS 样式插入到影子 DOM 节点中，而不是插入到文档的头部。Shadow DOM 节点的位置并不总是一致的，因此传递元素以动态插入样式的能力是关键。

该文档style-loader引用了一个可以在配置中使用的函数，insert该函数允许创建函数以指定要添加样式的位置。导入样式并使用参数调用use函数target是该示例指定要添加样式的其他元素的方式。

我遇到的问题是options插入函数中调用的第二个参数始终未定义。该element参数存在并包含正确的自定义样式标记内容，但从options未定义指定将这些样式添加到何处的对象，因此样式最终会添加到文档头，这不是所需的结果。

这是我的相关 webpack 代码：

    module: {
    rules: [
        {
            test: /\.css$/i,
            exclude: /\.lazy\.css$/i,
            use: ['style-loader', 'css-loader'],
        },
        {
            test: /\.scss$/,
            exclude: /\.lazy\.scss$/i,
            use: ['style-loader', 'css-loader', 'sass-loader'],
        },
        {
            test: /\.lazy\.scss$/i,
            use: [
                {
                    loader: 'style-loader',
                    options: {
                        injectType: 'lazyStyleTag',
                        insert: function insertIntoTarget(element, options) {
                            var parent = null;
                            if (!options) {
                                parent = document.head;
                            } …