目前我正在尝试构建一个应包含 YouTube 链接的应用程序"https:\/\/www.youtube.com\/watch?v=IEDEtZ4UVtI"。因此,第一次尝试运行它是 O <video className="video" src="https:\/\/www.youtube.com\/watch?v=IEDEtZ4UVtI"></video>,但正如您可能会看到的那样,它不会按预期工作。还有什么其他选择。请记住,我的 API 中没有任何嵌入链接,因此您看到的第一个 YouTube 链接只是我应该使用的一个。
目前我正在编写一个测试来测试里面的内容(HTML 内容),但似乎我无法使用 React 测试库正确测试。它可以找到它的 id 值,但是如何获取该元素中的 HTML 内容。
import React from 'react';
export const TopBar = () => {
return (
<div className="dashboard-title-component">
<div>
<div data-testid="title-content">Dashboard Menu</div>
</div>
</div>
)
}
import React from "react";
import { render } from "@testing-library/react";
import { TopBar } from "./TopBar";
import { Provider } from "react-redux";
import { store } from "../../Store";
import { screen } from "@testing-library/dom";
import "@testing-library/jest-dom/extend-expect";
test("It should check if content matches", () => {
render(
<Provider store={store}>
<TopBar/> …Run Code Online (Sandbox Code Playgroud)我使用 css grid 来输出图像中显示的元素的确切结构。唯一缺少的是您在下图中看到的线条。最重要的是代码简洁、干净和 DRY。我在考虑使用伪元素,只是它不会帮助编写可读的代码。
.three {
display: grid;
grid-template-rows: repeat(7, 100px);
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
grid-template-areas:
". C ."
". . B-1"
"A B B-2"
". . B-3"
". D ."
". E .";
}
.A { grid-area: A; }
.B { grid-area: B; }
.C { grid-area: C; }
.D { grid-area: D; }
.E { grid-area: E; }
.B-1 { grid-area: B-1; }
.B-2 { grid-area: B-2; }
.B-3 { grid-area: B-3; }
.unordered-list {
background-color: …Run Code Online (Sandbox Code Playgroud)目前,在没有 TypeScript 的情况下,此代码可以正常工作,但不幸的是,现在它无法正常工作。它给了我以下错误:“HTMLElement”类型上不存在属性“值”。不知道这有什么问题。似乎它在喋喋不休地谈论价值。在本例中,我使用 Jest 测试和 React。不确定我是否可以忽略此错误或应该修复此错误以避免将来出现奇怪的错误。
import React from 'react';
import axios from 'axios';
import { useDispatch } from "react-redux";
import { getData } from '../../../actions/index';;
export const SearchInput : React.FC = () => {
const dispatch = useDispatch();
let input: any;
const getInputValue = (value: string):void => {
let url = `https://api.tvmaze.com/search/shows?q=${value}`
}
return (
<div className="container">
<h1>Keyword</h1>
<form className="form display-inline-flex"
onSubmit={e => {
e.preventDefault()
if(!input.value.trim()) return;
getInputValue(input.value);
}}>
<input className="form-input-field disable-outline display-inline"
ref={node => (input = …Run Code Online (Sandbox Code Playgroud)