小编Laz*_*zyk的帖子

我有一个 React 组件，它要么采用to(react-router-dom prop) 要么采用hrefprop，具体取决于我想将用户重定向到哪里；无论是在应用程序内还是外部 URL。Typescript 抱怨我的类型

类型“LinkType”上不存在属性“to”。

类型“LinkType”上不存在属性“href”。

这就是我定义我的类型的方式

import React from 'react';
import { Link } from 'react-router-dom';

interface LinkBase {
  label: string;
  icon?: JSX.Element;
}

interface RouterLink extends LinkBase {
  to: string;
}

interface HrefLink extends LinkBase {
  href: string;
}

type LinkType = RouterLink | HrefLink;

export function NavLink(props: LinkType) {
  const { to, label, icon, href } = props;  // TS complains about those to and href

  return(
    {to ? ( …

我试图在我的 Header 组件中的搜索输入上使用 ref ，它不是我的 ResultsList 组件的高阶组件。我想将焦点集中在 ResultsList 组件的标题搜索输入上。从标题来看它很直观，因为我所要做的就是下面的内容。如果我想在 ResultsList 中创建一个专注于 Header 中的输入元素的按钮该怎么办？我如何通过这个参考？我已经阅读过有关forwardRef的内容，但我没有将我的参考转发。ResultsList 不是 Header 的子项。

import React, { useState, useRef } from 'react';
import { useHistory } from 'react-router-dom';

const Header = () => {
  const searchInput = useRef(null);
  const history = useHistory();

  const [searchValue, setSearchValue] = useState(keyword);

  function handleChange(event) {
    setSearchValue(event.target.value);
  }

  function handleSearch(event) {
    event.preventDefault();
    if(searchValue) {
      history.push(`/search/${searchValue}`);
    } else {
      searchInput.current.focus();
    }
  }

  return (
    <form onSubmit={handleSearch} role="search">
      <input
        value={searchValue}
        onChange={handleChange}
        className="HeaderSearch__input"
        id="header-search-input"
        placeholder="Search a repository" …

我正在使用上下文来存储对话框的对象。我有一个函数可以根据 prevState 更新存储在上下文中的数组，但是 TypeScript 不喜欢我的 prevState 类型。

类型“(prevState: SourceOrganizationAccount[]) => SourceOrganizationAccount[]”的参数不可分配给“SourceOrganizationAccount[]”类型的参数。类型“(prevState: SourceOrganizationAccount[]) => SourceOrganizationAccount[]”缺少类型“SourceOrganizationAccount[]”中的以下属性：pop、push、concat、join 以及其他 27 个属性。

这是我的带有 function 的组件handleCheckAccountDetailsClick。它在这条线上抱怨sourceOrganizationAccounts.setValue((prevState: SourceOrganizationAccount[]) => {。prevState 有什么问题吗？

import React from 'react';
import { getAccount } from 'utils';
import {
  SourceOrganizationAccount,
  useImportAccountsContext,
} from '../ImportAccountsContext';

export function ImportAccountsTable() {
  const { sourceOrganizationAccounts } = useImportAccountsContext();

  async function handleCheckAccountDetailsClick(account: SourceOrganizationAccount) {
    const accountDetailsRes = await getAccount();

    if (accountDetailsRes.success) {
      sourceOrganizationAccounts.setValue((prevState: SourceOrganizationAccount[]) => {
        const updatedArray = prevState.map(sourceOrganizationAccount => {
          return sourceOrganizationAccount.locator …

我正在创建一个带有对象参数的简单函数。它接受openDialog决定是否运行另一个函数的布尔属性。我没有为它定义一个接口，因为它永远是一个单一的属性。我的问题是如何定义它，以便我不再需要将空对象传递给该函数？openDialog是可选的，那么使该对象也可选的正确语法是什么？

function renderComponent({ openDialog }: { openDialog?: boolean }) {
  render(
    <Component />
  );

  if (openDialog) clickButton('Import Existing');
}

renderComponent()Typescript抱怨

预期有 1 个参数，但得到 0 个。

它接受renderComponent({})

我知道有一个默认参数function renderComponent({ openDialog }: { openDialog?: boolean } = {}) {，但我想知道是否有不同的方法。

是否有 ESLint 或 Prettier 规则不允许没有占位符的模板文字？我想用标准引号替换没有占位符的模板文字中的反引号''；

允许

const templateLiteral = `Some ${string}`;

不允许

const templateLiteral = `Some string`;

转换成

const templateLiteral = 'Some string';

我有一个标签，如果需要字段，我想为其添加星号。我曾尝试申请ng-class，像这样

<div class="col-xs-12 top5"  ng-if="(activity.itemType=='TEXTAREA')">
     <label class="col-xs-3 control-label text-right" for="act4{{$index}}"
            ng-class="{'asterisk-if-mandatory': data[$index].mandatory}">{{activity.itemLabel}}</label>
     <div class="col-xs-9">
         <textarea ng-model="activityItems[$index].value"
                   ng-required="data[$index].mandatory" cols="40" rows="6"
                   id="act4{{$index}}" name="txtComments" class="defaultTextareaInput"></textarea>
     </div>
</div>

然后css

.asterisk-if-mandatory {
    content: " *"
}

任何解决方案？

我试图在我的约会中添加几个月,但结果很奇怪.

这就是我正在做的事情:

var date = new Date();
date = date.setMonth(date.getMonth() + 36);

结果是:

1622458745610

我不明白为什么......

我正在用if语句挣扎，如果用户是admin，那么我想在其中添加另一个条件，例如vm.model.purchaseDate是否不为空

需要一些伪代码来解释它

if(vm.model.purchaseDate && (vm.user.admin then also if(anotherCondition))) {
   //do something1
   //do something2
   //do something3
   //do something4
} else {
   //do something else
}

因此，如果vm.model.purchaseDate已定义并且用户不是，vm.user.admin则忽略anotherCondition。如果用户vm.user.admin还检查anotherCondition。

当我做某件事的代码很长时，我不想结束编写大量的ifs。试图避免这种情况

if(vm.model.purchaseDate) {
   if(vm.user.admin) {
      if(anotherCondition) {
         //do something1
         //do something2
         //do something3
         //do something4
       }
   } else {
      //do something1
      //do something2
      //do something3
      //do something4
   }
} else {
   //do something else
}

如何将元素添加到部分而不是纯字符串？

我正在尝试使用，append但这不能解析我的 HTML。

也许有更多的 AngularJS 方法可以做到这一点，我不知道。

document.getElementsByClassName("left-menu")[0].append(
  '<div class="adverts-container top30">' +
    '<div class="advert-carousel">' +
      'Message' +
    '</div>' +
  '</div>'
);
        

<section class="left-menu"></section>

我正在尝试创建一个具有不等行的 CSS 网格，但我无法.feature-block-header只占用它实际需要的空间。我不希望它与 等高.feature-block-text。有没有一种方法可以采用 flex-grow 的方式，.feature-block-text以便它占用任何未使用的空间标头？

我想我已经尝试了几乎所有网格行属性......

.feature-block {
  display: grid;
  grid-template-columns: 320px auto;
  grid-column-gap: 10px;
  grid-template-areas:
    "feature-block-image feature-block-header"
    "feature-block-image feature-block-text";
}

.feature-block-header {
  grid-area: feature-block-header;
  background: yellow;
  margin-top: 0;
}

.feature-block-image {
  grid-area: feature-block-image;
  width: 320px;
  height: 320px;
  background: lightblue;
}

.feature-block-text {
  grid-area: feature-block-text;
  background: lightgreen;
}

<div class="feature-block">
  <h2 class="feature-block-header">Header</h2>
  <div class="feature-block-image"></div>
  <div class="feature-block-text">
    <p>Some text within text block</p>
  </div>
</div>

我在表单字段中使用了3个col-xs-6但是我没有得到我想要的结果.

我想实现这个目标:

| col-xs-6 | 
| col-xs-6 |
| col-xs-6 |

但相反,我看到了这一点

| col-xs-6 | col-xs-6 |
| col-xs-6 |

我知道这是它的工作方式,但我想实现第一个结果.我尝试过对每个col-xs-6s应用行但是没有用.

这是我的HTML

<div class="col-xs-12">
   <h1>Form</h1>

   <form class="top20" ng-submit="vm.exportForm()" name="vm.exportForm" novalidate>
       <formly-form model="vm.exportModel" fields="vm.exportFields" form="vm.exportForm"></formly-form>
   </form>
</div>

这就是我如何构建控制器中的形式

vm.exportFields = [
    {
        className: 'col-xs-6',
        key: 'field1',
        type: 'select2',
        templateOptions: {
            label: 'Field1',
            valueProp: 'subCode',
            labelProp: 'description',
            options: []
        }
    },
    {
        className: 'col-xs-6',
        key: 'field2',
        type: 'select2',
        templateOptions: {
            label: 'Field2',
            valueProp: 'subCode',
            labelProp: 'description',
            options: []
        }
    },
    {
        className: …