我这里有一个stackblitz 演示
这是一个超级简单的应用程序，应该只显示下面的测试输入以及输入字段中内容的输出。
我在输入组件上遇到错误
'CustomInput' cannot be used as a JSX component.
Its return type 'void' is not a valid JSX element.
谁能明白为什么我会收到此错误
我正在学习有关反应测试的教程。本教程有一个像这样的简单组件来显示测试异步操作：
import React from 'react'
const TestAsync = () => {
const [counter, setCounter] = React.useState(0)
const delayCount = () => (
setTimeout(() => {
setCounter(counter + 1)
}, 500)
)
return (
<>
<h1 data-testid="counter">{ counter }</h1>
<button data-testid="button-up" onClick={delayCount}> Up</button>
<button data-testid="button-down" onClick={() => setCounter(counter - 1)}>Down</button>
</>
)
}
export default TestAsync
而测试文件是这样的：
import React from 'react';
import { render, cleanup, fireEvent, waitForElement } from '@testing-library/react';
import TestAsync from './TestAsync'
afterEach(cleanup);
it('increments counter after 0.5s', …我有一个带有 keystone.js 后端和 graphql api 的 React 应用程序
我在 keystones.js 中有一个产品列表和一个简单的 graphql 查询
import gql from "graphql-tag";
export const ALL_PRODUCTS_QUERY = gql`
query ProductData{
allProducts{
id
price
description
name
}
}
`
我正在使用 apollo codegen 生成 graphql 的类型，所以我得到
export interface ProductData_allProducts {
__typename: "Product";
id: string;
price: number | null;
description: string | null;
name: string | null;
}
export interface ProductData {
/**
* Search for all Product items which match the where clause.
*/
allProducts: (ProductData_allProducts | null)[] …我正在尝试将样式组件与打字稿和 BEM 结构一起使用
所以我有一个简单的例子
索引.tsx
import styled from 'styled-components'
import Header from './Header'
interface ICard {
Header:
}
const Card = styled.div`
border: 1px solid gray;
padding: 10px;
`
Card.Header = Header
export default Card
标头.tsx
import styled from 'styled-components'
const Header = styled.h1`
color: #313c53;
font-size: 1.2em;
line-height: 1.5;
`
export default Header
并在标记中
<Card>
<Card.Header>
Header
</Card.Header>
</Card>
我的问题出在 index.tsx 中，我在这里收到错误Card.Header = Header
Type 'StyledComponent<"label", any, {}, never>' is not assignable to type 'never'.ts(2322)
我知道这是与打字稿相关的，我一直在尝试修复界面，但无法让它工作。
我该如何修复这个打字稿错误？
我正在尝试测试使用反应测试库构建的表
我正在使用 debug 输出
<body>
<div>
<div
class="table-wrapper"
>
<div
class="table-component__header"
/>
<table
class="test-table"
>
<tbody>
<tr>
<td
class="text-grid-item"
data-testid="text-grid-item"
>
test table data
</td>
</tr>
</tbody>
<tfoot
class="table_footer"
>
<tr>
<td />
</tr>
</tfoot>
</table>
</div>
</div>
</body>
我试图断言test table data那里有
expect(findByTestId('text-grid-item')).toHaveTextContent('test table dat')
但它失败了
received value must be a Node.
Received has type: object
Received has value: {}
我怎样才能断言文本test table data在那里
import React from 'react'
import { render } from '@testing-library/react'
import { Table …我正在按照一个简单的教程来学习反应测试库。
我有一个简单的组件，如：
import React, {useState} from 'react';
const TestElements = () => {
const [counter, setCounter] = useState(0)
return(
<>
<h1 data-testid="counter" >{ counter }</h1>
<button data-testid="button-up" onClick={() => setCounter(counter + 1)}>Up</button>
<button data-testid="button-down" onClick={() => setCounter(counter - 1)}>Down</button>
</>
)
}
export default TestElements
和一个测试文件，如：
import React from 'react';
import {render, cleanup} from '@testing-library/react'
import TestElements from './TestElements';
afterEach(cleanup);
test('should equal to 0', () => {
const { getByTestId } = render(<TestElements />)
expect(getByTestId('counter')).toHaveTextContent(0)
});
但是如果我运行测试，我会收到以下错误：
TypeError: expect(...).toHaveTextContent is …我用 React 和 typescript 启动了一个简单的待办事项应用程序
我正在创建上下文，但内容提供者的值出现错误
<TodoContext.Provider value={contextValue}>{children}</TodoContext.Provider>
对于值我得到错误
Type '{ todoList: string[]; }' is not assignable to type 'null'.
错误是什么意思以及如何修复此打字稿错误
import { createContext, useContext, useState, ReactChildren, ReactChild } from "react";
interface AuxProps {
children: ReactChild | ReactChildren;
}
const TodoContext = createContext(null)
const intialTodo = ['Learn Context']
const TodoProvider = ({children}:AuxProps) => {
const [todoList, setTodoList] = useState<string[]>(intialTodo)
const contextValue = {
todoList
}
return(
<TodoContext.Provider value={contextValue}>{children}</TodoContext.Provider>
)
}
export const useTodoContext = () => useContext(TodoContext)
export default TodoProvider
我从和数组中添加文本元素，我喜欢遍历元素并更新claas名称。
我正在选择具有当前类名的元素，并且我还想添加新的类名。
是否可以添加新的类名，例如
element.className={'selected'}
=
import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
const App = () => {
const colors = [
'Red', 'Green', 'Blue', 'Brown', 'Yellow', 'Black'
]
const loopFun = () => {
for(let i=0; i<colors.length; i++){
const element = document.getElementsByClassName('test-'+i)
//element.className={'selected'}
}
}
return (
<div className='titles'>
{colors.map((color, i) => (
<p key={i} className={'title-'+i}>{color}</p>
))}
{loopFun()}
</div>
);
}
render(<App />, document.getElementById('root'));
我研究了样式组件并尝试了网站上的示例，但我也想使用 TypeScript。
我这里有这个简单的例子
import React from 'react';
import './App.css';
import styled from 'styled-components';
interface IProps{
primary: boolean
}
const App:React.FC<IProps> = ({primary}) => {
return (
<div className="App">
<h1>Styled Components</h1>
<Button>Normal</Button>
<Button primary>Primary</Button>
</div>
);
}
const Button = styled.button`
background: ${props => props.primary ? 'red' : 'white'};
color: ${props => props.primary ? 'white' : 'red'};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 1px solid green;
border-radius: 3px;
`
export default App;
但我在主要道具上遇到错误
我收到错误
Property 'primary' does not exist …