小编swo*_*opy的帖子

似乎无法使用反应测试库获取输入的值，但由于某种原因，可以通过fireEvent. nameInput是一个实际的输入元素

test('verify name validation works', () => {
    const { getByPlaceholderText, getByTestId, debug } = render(<Home/>)

    const passForm = getByTestId('form')
    const nameInput = getByPlaceholderText('Name');

    fireEvent.change(nameInput, { target: { value: 'TestName' }});
    debug(nameInput.value) // error
})

更新

我必须断言 asHTMLInputElement可以作为 ts 推断它是通用的HTMLElement

expect((nameInput as HTMLInputElement).value)

假设我有一个对样式进行单一引用的组件，效果很好

export const something = () => {
  return (
    <div className={styles.myStyle}
  )
}:

但是，我想获得多种样式的参考，例如

export const something = () => {
  return (
    <div className={[styles.myStyle, styles.myOtherStyle]}
  )
}:

打字稿抛出一个error说：

预期的类型来自属性“className”，该属性在类型“IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly<{children?: ReactNode;”上声明。}>'

如何将className类型更改为数组才能接受我想要的格式？

所以我正在尝试编写一种道具类型格式，其中如果选择一个道具，则另一个道具将被丢弃。

type ButtonProps = {
    to: string,
} | {
    onClick: (() => void) 
};

export const BackButton = (props: ButtonProps) => {
  if(props.to != null) {
     //props {to} will be used hence no need for onClick
  }
  else {
    // {onClick} will be used over {to} 
  }
}

但它说

类型“ButtonProps”上不存在属性“to”。类型 '{ onClick: () => void; 上不存在属性 'to' }'.ts(2339`

如何使用 OR 格式化类型形状，以便在选择其中之一时，另一个将被丢弃。没有选项，所选择的道具是必需的。

它以某种方式正常工作react-scripts start。但是当尝试通过故事书查看各个组件时，它会抛出一个错误，就像上面标题中所说的那样。

这是我的代码。

index.tsx

import React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport \'./index.css\';\nimport App from \'./App\';\nimport * as serviceWorker from \'./serviceWorker\';\n\n\nReactDOM.render(<App />, document.getElementById(\'root\'));\n

App.tsx

import React from \'react\';\nimport\xc2\xa0{\xc2\xa0BrowserRouter,\xc2\xa0Route,\xc2\xa0Switch, Link\xc2\xa0}\xc2\xa0from\xc2\xa0"react-router-dom";\nimport { Register } from \'./pages/register/register\'\nimport { Login } from \'./pages/login/login\'\nimport { Home } from \'./pages/home/home\'\n\nconst App: React.FC = () => {\n  return (\n    <div id="app-root">\n      <BrowserRouter>\n        <Switch>\n          <Route path="/" exact component={Home} />\n          <Route path="/register" exact component={Register} />     \n          <Route path="/login" exact component={Login} />\n        </Switch>\n      </BrowserRouter>\n …