标签: tsx
在保留道具的同时扩展React和TypeScript中的HTML元素
我只是无法绕过这个我想,我已经尝试了大概六次并总是求助于any...是否有合法的方式从HTML元素开始,将其包装在组件中,并将其包装在另一个组件中,HTML道具通过一切？基本上自定义HTML元素？例如,类似于:
interface MyButtonProps extends React.HTMLProps<HTMLButtonElement> {}
class MyButton extends React.Component<MyButtonProps, {}> {
render() {
return <button/>;
}
}
interface MyAwesomeButtonProps extends MyButtonProps {}
class MyAwesomeButton extends React.Component<MyAwesomeButtonProps, {}> {
render() {
return <MyButton/>;
}
}
用法:
<MyAwesomeButton onClick={...}/>
每当我尝试这种组合时,我都会收到类似于的错误:
foo的属性'ref'不能分配给目标属性.
推荐指数
解决办法
查看次数
类型“({articles}: Props) => JSX.Element”不可分配给类型“NextPage<{}, {}>”
我之前使用过 Vue.js 之后才开始接触 React.js 和 Next.js。我遇到了一个奇怪的打字稿错误，但奇怪的是，尽管 VS Code 向我抱怨它无法编译，但它实际上还是编译了。
我正在尝试将数组Article作为道具传递到我的家庭组件中。
这里是相关代码：
interface Article {
userId: number;
id: number;
title: string;
body: string;
}
interface Props {
articles: Article | Article[];
}
const Home: NextPage = ({ articles }: Props) => {
return (
<div>
{/* some stuff */}
</div>
);
};
Home带有红色下划线，当我将鼠标悬停在上面时出现错误：
const Home: NextPage<{}, {}>
Type '({ articles }: Props) => JSX.Element' is not assignable to type 'NextPage<{}, {}>'.
Type '({ articles }: Props) => JSX.Element' …推荐指数
解决办法
查看次数
在chrome devtools中，在我所有的tsx源文件中，语法突出显示和智能感知不再起作用
对于具有.tsx扩展名的文件，调试功能对我而言不再起作用。
调试.ts文件时，它正常工作：
源地图从其仍在工作时就保持不变。但是.tsx文件现在看起来是这样的。所有代码都是黑色的，而不是样式化的，以指示关键字/字符串等之间的差异。而且，在调试（确实有效）时，我无法将变量悬停以查看其值。
任何想法如何解决这个问题？
编辑：我曾经通过发送内容类型标头解决此问题，如下面的答案所述。但是，即使我在新标签页中打开源文件时，问题又回到了现在，我可以看到Content-Type为“ application / javaScript”
推荐指数
解决办法
查看次数
使用React创建可扩展的体系结构
我的团队正在使用React,Typescript,TSX和Webpack创建CMS的管理面板.管理面板的每个页面都已创建为React组件,每个页面包含许多其他子组件(每个部分一个).
CMS发行版目前包含运行Web应用程序所需的javascript的捆绑版本,但不包括原始TSX文件.
现在,我们希望使用我们的CMS来扩展Web应用程序的开发人员
1)使用"槽填充"方法将其他部分注入UI
2)可能甚至覆盖现有部分,在同一个地方渲染不同的组件.
<div>
<SidebarComponent />
<Section1Component />
<Section2Component />
// How to inject a possible PluginComponent here?
</div>
从我们迄今为止进行的研究来看,似乎没有"官方"方法来做到这一点,所以我想知道在这种情况下最好的方法是什么.
推荐指数
解决办法
查看次数
如何在Typescript React中遍历Component的Children？
如何在Typescript tsx中遍历React组件的子项？
以下是有效的jsx:
public render() {
return (
<div>
{React.Children.map(this.props.children, x => x.props.foo)}
</div>
);
}
但是,在Typescript中,x的类型是React.ReactElement<any>这样我无法访问props.我需要做某种铸造吗？
推荐指数
解决办法
查看次数
如何评论 .tsx 文件？
我想评论下面显示的 TSX 代码。我怎样才能做到这一点？
<Form.Group controlId="type"> <Form.Label>Type</Form.Label>
推荐指数
解决办法
查看次数
构建:除非提供'--jsx'标志,否则不能使用JSX
我正在使用VS 2013和tsx文件做出反应.我可以手动构建我的项目.(右键单击并构建解决方案)
但是当我尝试在Azure上发布时,VS会再次尝试构建,但当时我收到的所有错误都表示为:
Error 2 Build: Cannot use JSX unless the '--jsx' flag is provided.
并指向我的tsx文件.
看起来像Azure Publish使用不同于VS 2013的构建步骤.
我该如何解决这个问题？
推荐指数
解决办法
查看次数
React useState hooks 错误：“xxx”类型的参数不可分配给“SetStateAction<xx>”类型的参数
我使用 react hooks 来更新，但是在 setState 时会注意到错误。
'{ alertRules: any; 类型的参数 }' 不能分配给'SetStateAction' 类型的参数。对象字面量只能指定已知属性，并且类型“SetStateAction”中不存在“alertRules”.ts(2345)
这是我的代码。
import React, { useState, useEffect } from 'react';
import { FieldArray } from 'redux-form';
import { CoordinateSelect } from '~/fields';
import lodash from 'lodash';
import { connect } from 'react-redux';
import { filterDispatchers } from '~/actions';
import t from '~/locale';
interface Props {
getAlertRules(o: object): Promise<any>;
}
type Alert = {
...
}
const connector = connect(
null,
filterDispatchers('getAlertRules'),
);
const AlertRuleForm = (props: Props) => …推荐指数
解决办法
查看次数
如何使用 React 提供多个 HTML 文件？
我想用 React 和多个 HTML 页面构建一个 Web 应用程序。例如 login.html 和 index.html。我已经创建了这些 HTML 页面并使用我的后端将它们映射到 URI。所以我有 localhost:8080/login 和 localhost:8080/index。不幸的是，React 只使用 index.html 文件来渲染内容！
所以 index.html 工作并且显示了 React 内容：localhost:3000/index.html
<!-- index.html -->
...
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="wizard"></div>
</body>
...
<!-- index.tsx -->
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import FetchData from "./FetchData";
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<div className="d-flex flex-column">
<div className="bg-dark text-light AppHeading">Self-Service-Webwizard</div> …推荐指数
解决办法
查看次数
useRef TypeScript - 不可分配给类型 LegacyRef<HTMLDivElement>
我正在尝试useRef与 TypeScript一起使用，但遇到了一些麻烦。
用我的RefObject（我假设）我需要访问current. （即node.current）
我已经尝试了以下
const node: RefObject<HTMLElement> = useRef(null);const node = useRef<HTMLElement | null>(null);
但是当我去设置时，ref我总是被告知 Xis not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
return <div ref={ node }>{ children }</div>
编辑：这不应该仅限于任何一种类型的元素，所以不仅仅是 HTMLDivElement | HTMLFormElement | HTMLInputElement
编辑：这应该作为一个例子
import React, { useRef, RefObject } from 'react';
function Test()
{
// const node = useRef(null);
// const node: RefObject<HTMLElement> = useRef(null);
const node = useRef<HTMLElement | null>(null);
if ( …推荐指数
解决办法
查看次数
标签 统计
tsx ×10
typescript ×9
reactjs ×7
jsx ×2
azure ×1
comments ×1
html ×1
next.js ×1
plugins ×1
react-hooks ×1
react-jsx ×1
react-native ×1