EgorG's questions

我正在用 react/typescript 制作一个应用程序。该应用程序有自己的 ui 套件，其中包含可重复使用的组件 - 选择、输入、按钮等。因此，这些组件的不同消费者有自己的类型。

无法键入选择。简化示例 - https://codesandbox.io/s/silly-albattani-h95cfj

道具类型是selectedItem：

type SelectedItem = { value: string | number; label?: string; };

和 onChange 道具：

(option: SelectedItem) => void

使用这个组件的地方，我想把这个类型扔到 selectedItem prop

type City = { value: string; label: string }

在 onChange 道具中：

 (city: City) => void

我希望 Select 组件中声明的类型是supertypes，然后：

1. City 类型将是SelectedItem 的子类型
2. 类型 (city: City) => void 将是(option: SelectedItem) => void 的子类型

第一个有效，但第二个无效。

这就像 ts 考虑 (city: City) => void a supertype and type (option: SelectedItem) => void a subtype

我有一个字符串 '/abc/x=1+2&y=25&c=1' ，其中 'x=1+2&y=25&c=1' 是一组特定的过滤器。我想编写一个函数，使用正则表达式获取每个过滤器的值，即：

1) getSubString(str, 'x') - должна вернуть '1+2'
2) getSubstring(str, 'y') - должна вернуть '25'
3) getSubstring(str, 'c') - должна вернуть '1'

到目前为止，我的功能如下所示：

const getSubString = (pathname, filterName) => {
  const regexp = new RegExp(`${filterName}=(.*)&`);

  return pathname.match(regexp)[1];
}

我不明白两件事：

1. 在第一种情况下，'1+2&y=25' 被返回给我，也就是说，由于某种原因，搜索到了字符串中的最后一个字符 &。如何从我传入的“x”进行引擎搜索，直到第一次出现 &？
2. 在第三种情况下，引擎找不到任何匹配项，因为 在正则表达式中由最后一个字符 & 表示。当可能以 & 或行尾结尾时如何处理这种情况？我试图用 (&|\z) 结束正则表达式 - 它没有用。

我有一个相当大的对象数组（122000 个元素）。我制作了一个组件的两个版本来处理这些数据：

1) 数据数组位于服务器上。在 useEffect(func, []) 的帮助下，整个数组在组件的第一次渲染时立即加载并输入一个常量。此外，当用户开始在输入字段中输入字符时，来自常量的数据开始以某种方式过滤（这发生在输入字段处理程序中），并且过滤后的数组元素列表出现在屏幕上。

2) 数组也位于服务器上，但是每次用户输入时，都会使用附加参数（用户输入的内容）向服务器发出请求，并且根据此参数，在服务器上过滤数据并发送到客户端，它也显示在表单列表中。

客户端用react写，服务端用nodejs写。

问题：在性能方面，这种情况下会更好吗？向服务器发出一个请求并处理客户端上的数据，还是向服务器发出多个请求并处理服务器上的数据？

了解在 useEffect 挂钩中捕获 try catch 错误的机制。为此，在 try 块中，我通过 throw new Error 创建错误，并且我认为，程序应该转到 catch 块，控制台日志将显示在屏幕上，但这不会发生。为什么会这样？

useEffect(() => {
const fetchData = async () => {
  setIsError(false);
  setIsLoading(true);

  try {
    const response = await fetch(`/api/getCities?query=${query}`);
    const body = await response.json();

    if (response.status >= 500) {
      throw new Error('Server Error');
    }
    //Создаю свою ошибку
    throw new Error('My error');
    setListCities(body);
  } catch {
    console.log('point 1');
    setIsError(true);
    console.log('point2');
  }

  setIsLoading(false);
};

fetchData();
}, [query]);

我有大量城市列表，我需要对其进行过滤，以便名称中没有包含非拉丁字符的城市。但与此同时，包含空白字符的城市仍保留在列表中。我喜欢这样：

list.filter(({ cityName }) => !/\W/i.test(cityName));

但是这样的过滤器会过滤掉包含空格字符的城市，例如洛杉矶，我该如何绕过呢？

您能否告诉我是否可以从伪类组成一个选择器，从而不使用类来为该布局中的每个 SECOND span 标签设置不同的样式（两种不同的颜色）？

<div className="weather-card__min-max">
   <div className="min__container">
     <span>0</span>
     <span>Min</span>
   </div>
   <div className="max__container">
     <span>4</span>
     <span>Max</span>
   </div>  
 </div>

我使用 scss 并这样写：

.weather-card__min-max {
  //какой-то код//

  .min__container, .max__container {
  // И тут должно быть два стиля для каждого второго <span>

  }
}

我有一个 svg 图像。svg 块本身的大小为width="64" height="64"，但是这个块显示的结果图像比 小很多64 х 64，事实证明，如果将这个 svg 块插入到某个父元素中，它会占用太多空间，并且图像本身会很小。
请告诉我可以更改哪些参数以使 svg 块保持 64 x 64 不变，并且图片被放大（最好占据 svg 元素的整个空间）？

 <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="64"
        height="64"
        viewbox="0 0 64 64">
        <defs>
            <filter id="blur" width="200%" height="200%">
                <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
                <feOffset dx="0" dy="4" result="offsetblur"/>
                <feComponentTransfer>
                    <feFuncA type="linear" slope="0.05"/>
                </feComponentTransfer>
                <feMerge> 
                    <feMergeNode/>
                    <feMergeNode in="SourceGraphic"/> 
                </feMerge>
            </filter>
            <style type="text/css"></style>
        </defs>
        <g filter="url(#blur)" id="day">
            <g transform="translate(32,32)">
                <g class="am-weather-sun am-weather-sun-shiny am-weather-easing-ease-in-out">
                    <g>
                        <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                    </g>
                    <g transform="rotate(45)">
                        <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                    </g>
                    <g transform="rotate(90)">
                        <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                    </g>
                    <g transform="rotate(135)">
                        <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                    </g>
                    <g transform="rotate(180)">
                        <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                    </g>
                    <g transform="rotate(225)">
                        <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                    </g>
                    <g transform="rotate(270)">
                        <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                    </g>
                    <g transform="rotate(315)">
                        <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                    </g>
                </g>
                <circle cx="0" cy="0" fill="orange" r="5" stroke="orange" stroke-width="2"/>
            </g>
        </g>
    </svg>

请帮我处理svg。
我想全屏制作背景 svg 图像（类 .canvas）。
它将由分散在屏幕周围的几个元素组成，其中之一是波浪（.waves 类），它们应该位于屏幕的底部边缘并占据大约 15%，但它们只是简单地拉伸到屏幕。
请告诉我如何解决这个问题，我怀疑是这种情况viewBox，但我试图改变它使情况变得更糟。

  .canvas {
        display: block;
        width: 100%;
        height: 100vh;
        background: linear-gradient(to top, rgb(71,88,112), rgb(71,82,107));
    }
    .waves {
        display: block;
        width: 100%;
        height: 15%;
        background: linear-gradient(to top, rgb(71,88,112), rgb(71,82,107));
    }

 <svg className='canvas'>
            <svg className="waves"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 25 150 28"
                preserveAspectRatio="none">
                <defs>
                    <path 
                        id="gentle-wave"
                        d="m -150,44.4 c 30,0 58,
                            -18 87.7,-18 30.3,0 58.3,
                            18 87.3,18 30,0 58,-18 88,
                            -18 30,0 58,18 88,18 l 0,
                            34.5 -351,0 z" />
                </defs>
                <g className="parallax">
                    <use xlinkHref="#gentle-wave" x="50" y="0" fill="rgb(68,88,129)"/>
                    <use xlinkHref="#gentle-wave" x="50" y="3" fill="rgb(30,42,73)"/>
                    <use xlinkHref="#gentle-wave" x="50" y="6" fill="rgb(37,50,80)"/>  
                </g>
                
            </svg>
        </svg>

  

我有一个带有按钮的表单组件：

export class Form extends Component {
  changeDateTextHandler = ({ target }) => {
    const { changeDateText } = this.props;
    changeDateText(target.value);
  }

  changeMoneyTextHandler = ({ target }) => {
    const { changeMoneyText } = this.props;

    if (target.value === '') {
      changeMoneyText('');
    }

    if (!+target.value) {
      return;
    }

    changeMoneyText(+target.value);
  }

  formHandler = (event) => {
    event.preventDefault();
    console.log('Hi');
  }

  addItemHandler = (event) => {
    event.preventDefault();

    const { addItem, currentInputData, clearInputFields } = this.props;
    addItem({
      id: uniqueId(),
      category: {
        categoryName: 'Start value',
        categorySign: '',
      },
      date: currentInputData.dateText,
      money: +currentInputData.moneyText,
    });
    clearInputFields();
  }

  render() {
    const { list, currentInputData } = this.props;

    const renderStartButton = () => (
      (list.length || !(currentInputData.dateText && currentInputData.moneyText)) ? (
        <button type="button" className="btn btn-add_disabled">Add start value</button>
      ) : (
        <button type="button" onClick={this.addItemHandler} className="btn btn-add">Add start value</button>
      )
    );

    return (
      <div className="form-moneyCalc d-flex justify-content-md-between pt-2">
        <form onSubmit={this.formHandler}>
          <div className="row justify-content-md-between justify-content-sm-center">
              <div className="col">
                <input type="text" className="form-control" placeholder="Date" value={currentInputData.dateText} onChange={this.changeDateTextHandler} />
              </div>
              <div className="col">
                <input type="text" className="form-control" placeholder="Money" value={currentInputData.moneyText} onChange={this.changeMoneyTextHandler} />
              </div>
          </div>
        </form>
        {renderStartButton()}
      </div>
    );
  }
}

我想在按钮和表单上挂起类似的处理程序，以便在按下 enter / 按钮时发生相同的操作。但我不明白为什么表单上的 onSubmit 事件不起作用。

大家好。有这部分布局

<div class="row exp">
        <div class="col col-ex d-flex flex-column">

        </div>
        <div class="col col-cat">

        </div>
    </div>

在大屏幕上，它看起来像水平并排的两列。我试图做到这一点，以便在使用中等屏幕时，第一列占据父级的整个宽度，第二列移动到第一列下方并且也占据整个宽度。请告诉我我该怎么做？

我正在做一个关于 react/redux 的研究项目。写了两个reducer：

const currentInputDataReducer = (state = defaultState, action) => {
switch (action.type) {
    ....
    default: {
      return state;
    }
  }
};

const expensesIncomeListReducer = (state = defaultState, action) => {
switch (action.type) {
    ....
    default: {
      return state;
    }
  }
};

对于视图状态：

const defaultState = {
  calcState: {
    currentInputData: {
      currentDate: '',
      currentMoney: '',
    },
    expensesIncomeList: [],
  },
};

现在我想组合它们并导出它们：

export default combineReducers({
  currentInputDataReducer,
  expensesIncomeListReducer,
});

在索引文件中创建存储库：

const store = createStore(rootReducer);

在我使用连接的组件中：

export default connect(mapStateToProps, actionCreators)(FormPanel);

结果，出现错误：

The above error occurred in the <ConnectFunction> component:
in ConnectFunction (created by Calc)
in div (created by Calc)
in Calc (created by Context.Consumer)
in Route (created by App)
in Switch (created by App)
in div (created by App)
in div (created by App)
in div (created by App)
in div (created by App)
in App
in Router (created by BrowserRouter)
in BrowserRouter
in Provider

为什么会发生这种情况？这在我将一个 reducer 一分为二并应用 combineReducers 函数后开始出现。

大家好。我正在做一个反应学校项目。对于布局，我使用 bootstrap4。在 .container 元素内，有一行包含 .content 类。使用 align-items-center 类，不可能将元素沿垂直轴放在中间，元素保持在原地，有什么问题吗？

<div className='app'>
<div className='container'>
  <div className="row align-items-center justify-content-center content">
    <div className="col-7 col-content">
      <Switch>
        <Route path={'/'} exact component={Calc} />
        <Route path={'/notebook'} component={Note} />
      </Switch>
    </div>
  </div>
</div>

.app {
    height: 100vh;
    width: 100%;
    background-color: #93e1ed;
    }

.container {
    height: 100vh;
}

.content {
    .col-content {
        background-color: #fff;
        min-width: 900px;
        border-radius: $br-radius;

        .main-content {
            height: 415px;
        }
    }
}

有一个布局

<div className='container app'>
<div className="row align-items-center justify-content-center content">
  <div className="col-7 col-content">
    <div className="row top-panel">
      <div className="col-8 left"></div>
      <div className="col right"></div>
    </div>
    <div className="row main">
      <div className="col-7 left"></div>
      <div className="col right"></div>
    </div>
  </div>
</div>

这是未来SPA应用的培训项目。如何使任何屏幕尺寸的 col-content 列的宽度保持不变（滚动条出现在小尺寸）？