在React中有没有办法通过扩展属性来传递elementType？
在React中，可以通过扩展属性来传递elementType。React中的扩展属性是指使用spread operator（...）将一个对象的属性展开并传递给另一个组件。
在React中，可以使用扩展属性来传递elementType，以便在组件中使用不同的元素类型。例如，可以定义一个名为"ComponentWithElementType"的组件，该组件接受一个名为"elementType"的扩展属性，并将其作为组件的元素类型。
以下是一个示例代码：
import React from 'react';
const ComponentWithElementType = ({ elementType: ElementType, ...props }) => {
return <ElementType {...props} />;
};
export default ComponentWithElementType;在上述代码中，我们定义了一个名为"ComponentWithElementType"的组件，它接受一个名为"elementType"的扩展属性，并将其作为组件的元素类型。然后，我们使用spread operator将其他属性传递给ElementType。
使用该组件时，可以通过扩展属性来传递elementType。例如，可以将一个div元素作为elementType传递给该组件：
import React from 'react';
import ComponentWithElementType from './ComponentWithElementType';
const App = () => {
return <ComponentWithElementType elementType="div" className="my-component" />;
};
export default App;在上述代码中，我们将一个div元素作为elementType传递给"ComponentWithElementType"组件，并使用className属性设置其类名。
这样，通过扩展属性传递elementType，我们可以在React中动态地使用不同的元素类型。这在需要根据条件或动态数据来渲染不同类型的元素时非常有用。
腾讯云相关产品和产品介绍链接地址：
相关·内容
import { mergeProps, splitProps } from "solid-js";
我正在尝试转换一个Solid-js应用程序来作出反应。我是问是否有相当于固体的mergeProps和splitProps的反应？
对于上下文，我也添加了一个一半转换的文件。
// import { styled } from "@stitches/react";
import React, { FC, ReactNode, useMemo } from "react";
// import { mergeProps } from "re
浏览 4提问于2022-07-24得票数 0
5回答
我发现在react原生中，如果我在一个View中设置了一个fontFamily，内部元素不会继承它的属性。react原生样式中有可用的级联概念吗？我该怎么做呢？
浏览 0提问于2016-12-24得票数 15
我创建了一个DocType MyDocType。
DocTypeGridEditor要求它的类型为ElementType，因此，我在Umbraco中将其检查为该类型。
它包含一个属性：GridLayout，即：
public Newtonsoft.Json.Linq.JToken MyGrid => this.Value<Newtonsoft.Json.Linq.JToken>("myGrid");
在我的cshtml中，我想渲染它，但是
@Html.GetGridHtml()
要求第一个参数为IPublishedContent.类型我使用UmbracoVie
浏览 6提问于2019-12-20得票数 0
回答已采纳
1回答
我有一个多态组件，其中我试图根据泛型推断事件类型。不幸的是，打字本在为不兼容的类型而尖叫。
import React, { forwardRef } from "react";
export type InferElement<T> = T extends keyof JSX.IntrinsicElements
? JSX.IntrinsicElements[T] extends React.DetailedHTMLProps<
React.AnchorHTMLAttributes<any>,
infer Elem
浏览 10提问于2022-08-26得票数 5
2回答
在App.tsx中，我将<Left />和<Right />传递给一个名为<SplitScreen />的导入组件
显然，“子”道具需要显式输入，因为响应18。如果我将其键入为React.Element[]，那么SplitScreen.tsx可以工作，但App.tsx抛出：
Type 'Element' is not assignable to type 'ElementType<any>'
如果我键入它为React.ReactNode (这似乎是目前的共识)，App.tsx可以工作，但是SplitScreen.t
浏览 6提问于2022-08-21得票数 0
1回答
我有以下接口：
@InterceptorBinding
@Target(value={ElementType.TYPE,ElementType.METHOD,ElementType.FIELD})
@Retention(RetentionPolicy.RUNTIME)
public @interface Transactional {
public Class[] rollbackon() default {};
}
default {}的含义是什么？我知道在Java 8中有可能在接口中实现具体的方法。是这样的吗？
浏览 7提问于2016-01-03得票数 1
回答已采纳
1回答
MUI扩展按钮道具
、、、
我想扩展MUI5组件并使用它们的component属性。要根据documentation执行此操作，我将在以下代码中使其工作： import Button, { ButtonProps } from '@mui/material/Button';
import React from 'react';
export type MyButtonProps<C extends React.ElementType> = ButtonProps<C, { component?: C }> & {
myOtherField: st
浏览 24提问于2021-10-25得票数 0
1回答
如何验证提供的prop是组件类(不是实例)？
例如：
export default class TimelineWithPicker extends React.PureComponent {
static propTypes = {
component: PropTypes.any, // <-- how can I validate that this is a component class (or stateless functional component)?
};
render() {
return (
浏览 0提问于2017-07-26得票数 38
回答已采纳
2回答
当包装简单的HTML元素时，以这个MyLink标记为例：
// MyLink.tsx
import React from 'react';
import { Omit } from 'type-zoo';
interface MyLinkProps
extends Omit<?, 'href'> {
to: string;
children: React.ReactNode;
}
export const MyLinkProps: React.FC<MyLinkProps> = ({
children,
浏览 0提问于2019-04-28得票数 12
回答已采纳
因为React 16.3，所以可以使用来访问DOM元素。我也在我的项目中使用，但是。
不幸的是，以下代码失败了：
/* @flow */
import * as React from 'react';
export class TestComponent extends React.Component<{}> {
myRef: React.Ref<HTMLDivElement>
constructor(props: any) {
super(props)
this.myRef = React.createRef()
}
浏览 1提问于2018-04-28得票数 23
回答已采纳
为了设置上下文，我在中，但随着我的跟踪，我实际上是在用TypeScript做所有事情。在本教程的这一点上，几个React组件中有一个叫做Repos
export class Repos extends React.Component<ReposProps, {}> { ... }
它是在Router中创建的
<Router history={browserHistory}>
{/* ... */}
<Route path="/repos" component={Repos}>{/* ... */}</Route>
浏览 3提问于2016-02-21得票数 3
回答已采纳
1回答
我想要创建一个组件MyComponent，它接收一个名为component的React.ElementType类型的道具。我的目标是将component道具限制在只有对onPress道具有有效实现的组件上，所以我只想允许按下组件，如Button、Touchable、Pressable等等。
我怎样才能从打字本中获得正确的声明呢？如何检查传递到支柱中的组件是否有onPress实现，这样如果没有就可以抛出一个错误？
interface MyComponentProps {
// Allow only Components that have implementation
// for on
浏览 7提问于2022-10-17得票数 0
回答已采纳
2回答
达特:从绳子上弄到明灯？
、、、
你好，我在Google省道库中有下面的类，并希望将Google样式的JSON解析为面向dart对象的格式。
在库中(不能更改！)我有以下内容：
part of google_maps.src;
@jsEnum
class MapTypeStyleElementType extends JsEnum {
static final values = <MapTypeStyleElementType>[
ALL,
GEOMETRY,
GEOMETRY_FILL,
GEOMETRY_STROKE,
LABELS,
LABELS_ICON
浏览 0提问于2017-03-10得票数 0
回答已采纳
我正在从MUI v3迁移到v4。我有一些包装的Button组件，它们扩展了常规Material组件上的一些样式和其他属性。自从升级到v4之后，我就会得到这样的类型错误。我正在使用react路由器-dom作为我的路由库。
当传递被转发的ref组件时，如MUI v4文档(此处：)中更新的button示例中所写的那样，我得到一个类型错误，在我为包装按钮提供的道具类型中不存在component。
我尝试过来自Button组件的各种类型组合，以查看其他东西是否可以工作，但似乎ButtonProps应该基于构建ButtonProps的OverrideProps类型来覆盖它。
下面是我在代码沙箱中的复制：
浏览 0提问于2019-05-24得票数 11
注册表格模板
import React from 'react';
import classes from '../../../assets/css/forms.css'
const SignupFormTemplate =(props) => {
let inputElement = null;
switch ( props.elementType ) {
case ( 'input' ):
inputElement = <input
浏览 0提问于2019-03-03得票数 0
回答已采纳
我有一个组件，我想默认呈现为一个h2。我希望消费者能够指定一个不同的元素，如果他们愿意的话。下面的代码导致错误：
TS2604 - JSX element type 'ElementType' does not have any construct or call signatures
我想我理解它失败的原因，TS希望呈现一个React节点。为了清晰起见，React可以将引用为字符串的元素呈现为字符串，只要变量以大写字母开头(这是JSX的要求)。我以前在vanilla + React中成功地做到了这一点，我只是不知道如何满足TypeScript。
如何使TypeScript在不
浏览 2提问于2019-06-19得票数 28
回答已采纳
目前，我正在尝试使用FluentUI/react northstar下拉组件创建一个下拉列表。不幸的是，这个组件的items支柱只有一个string[]，用于下拉列表中呈现的名称，但是我也需要一个key。
我试图通过使用renderItem添加自定义呈现程序来实现这一点：
<Dropdown
renderItem = (Component: React.ElementType, props: any): React.ReactNode => {
...
return <Component key={props.key} content={pro
浏览 0提问于2020-12-21得票数 4
回答已采纳
import App from './app.jsx';
...
let props = {};
res.render('layout', {
reactHtml: React.renderToString(<App />)
});
我如何将props传递到<App />表达式中，而不定义它的道具(如<App n={props.n} /> )？React.createFactory()和React.renderToString(App(props))在ES6中有什么等价之处吗？
浏览 1提问于2015-09-06得票数 0
回答已采纳
6回答
我正在使用，库的关键之一是使用速记道具，以方便和快速地进行主题化。
我简化了组件，但这里有一个有趣的部分：
import React from 'react'
import styled from 'styled-components'
import { color, ColorProps } from 'styled-system'
const StyledDiv = styled('div')<ColorProps>`
${color}
`
const Text = ({ color }: ColorPro
浏览 0提问于2018-12-10得票数 13
1回答
我在spring-boot中有后端，公开REST API，在react中我有分离的前端。 我想使用spring security来保护我的后端，并且我想保留spring身份验证链。但是，当我使用如下配置时： @Override
protected void configure(HttpSecurity httpSecurity) throws Exception {
httpSecurity
.addFilterBefore(authenticationFilter(), UsernamePasswordAuthenticationFi
浏览 25提问于2021-09-17得票数 2
当我们在URL中只有一个参数时，反应路由器是很棒的，但是当URL中有多个参数时，它就会变得很糟糕！例如，如果url是，那么我可以得到fooValue = bar；但是如果URL是，那么我将得到fooValue: "bar&this=that".. wth!！我在这里遗漏了什么？！
var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.R
浏览 0提问于2016-05-22得票数 1
1回答
快速获取泛型数组
、、、、
我需要得到数组的泛型类型。
我有一个对象是Array<Decodable>，但不能保证泛型类型总是Decodable。我知道我可以通过说array.self.dynamicType来获得Array.Type来获得这种类型的东西，但是我需要像array.generic.self.dynamicType这样的东西来获得Decodable.Type。我该怎么做？
浏览 1提问于2016-09-28得票数 0
回答已采纳
1回答
我正在使用构建一个模板组件，但我面临一个无法解决的问题。我发这篇文章是为了防止有人知道如何接近它。
My项目中的requires.TemplateComp有一个MyComp组件，它使用子组件GraphComp调用TemplateComp，而图调用的数据以及Graph子组件的样式，再加上graphData.GraphComp旁边需要的一些道具(比如customPropertyA)，需要graphData正确地呈现某些参数。
我所面临的问题与在通过GraphComp时从MyComp到MyComp的类型定义有关。似乎(因为TemplateComp将graphData定义为any，因为它不知道) My
浏览 1提问于2022-05-23得票数 0
在体验了Spring applicationContext.xml声明依赖注入的方法之后，我现在尝试弄清楚如何使用EE6 CDI做同样的事情。
使用Spring，我可以将.jar附带几个配置配置文件，如unittest.xml、devel.xml、qa.xml、production.xml，并使用命令行参数或环境变量激活它们。
使用CDI，我可以在beans.xml中使用@Alternative，在web.xml中使用属性，但是似乎没有办法为不同的环境提供多个beans.xml。
我不想使用Maven配置文件/过滤器来生成我的应用程序的4-6版本，尽管我理解对于某些场景来说，这将是更好的解决方
浏览 2提问于2013-06-03得票数 12
回答已采纳
我有一个React <Wrapper>，可以如下所示：
// Assuming Link is a component that takes a `to` prop: <Link to="/somewhere">label</Link>
<Wrapped as={Link} to="/somewhere">label</Wrapped>
如果没有传递as支柱，它将假定为<a>。但是，如果一个组件被传递给as，那么所有对该组件有效的道具现在也应该是Wrapped的有效道具。
有办法在TypeS
浏览 2提问于2020-04-10得票数 5
回答已采纳
我有一个单节点ActiveMQ实例，其中有两个相互竞争的使用者连接到一个主题。主题订阅按照JMS 2.0规范进行共享。共享订阅不保证只有一个订阅者(使用相同的订阅名称)获得消息。但我注意到的是，它不能保证只有在第一条消息被确认的情况下才会传递第二条消息。在第一消费者花费时间确认消息的情况下，甚至在消费者将第一消息的确认发送到代理之前，第二消息就被传递给自由消费者。这是一种标准行为吗？有没有办法在确认第一条消息之前阻止代理传递第二条消息？
浏览 54提问于2021-03-11得票数 0
2回答
我刚开始使用react，而且我发现编写短路的js条件语句来检查一切都很麻烦。我不喜欢它嵌套在代码中的方式，以及它在大多数时候是不可读的，如下所示： {someCondition &&
<someComponent />
} 有没有办法在react中使用disabled属性来编写如下所示的代码： <someComponent disabled={!someCondition}/> 我认为这看起来更直观。有没有一种方法可以对react中的所有组件通用地实现这个disabled属性？
浏览 3提问于2020-01-09得票数 2
回答已采纳
请告诉我为什么当我调用this.props.getOnEvents()时，会出现“getOnEvents()不是一个函数”的错误，这里有什么问题以及如何修复它？我正在查看console.log，在props中有这个函数，但当我尝试调用时，一个错误飞出，表明它不是一个函数
EventCalendar.js
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import EventCalendarTable from
浏览 7提问于2019-11-20得票数 0
回答已采纳
类似于：
declare class $ReadOnlyArray<+T>
declare type React$Element<+ElementType: React$ElementType>
interface $Iterator<+Yield,+Return,-Next>
而不是出现在属性前面的类型，此处回答为
浏览 2提问于2018-07-11得票数 3
2回答
我不明白为什么我们要使用{...props}这样的东西
例如，在我的代码中(当我学习路由器时)，我这样做
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Home from './home.js';
const route = () => {
return(
<BrowserRouter>
<Switch>
浏览 1提问于2018-07-08得票数 4
1回答
我在一个react应用程序中使用redux从后端加载数据。我用axios加载了一堆数据，然后我可以选择一个项目，并在不同的视图中查看特定的信息。每次在后端进行搜索时，我都会呈现一个“加载”视图。问题是:每当我加载刷新浏览器的视图时，这个搜索都是正常的。但当我在自己的应用程序中导航时，我使用react-router-dom，我不需要显示加载屏幕，因为它已经在redux商店中了。 有没有办法告诉redux或react，如果我已经有了数据，就不进行异步调用？ redux-persist是解决这个问题的解决方案吗？我应该在react中有条件的情况下手动执行吗？ 我在componentDidMount
浏览 13提问于2019-04-10得票数 0
8回答
我想知道是否有比使用if -语句更好的有条件传递道具的方法。
例如，现在我有：
var parent = React.createClass({
propTypes: {
editable: React.PropTypes.bool.isRequired,
editableOpts: React.PropTypes.shape({...})
},
render: function() {
if(this.props.editable) {
return (
<Child editable={this.props.editab
浏览 6提问于2015-08-26得票数 139
回答已采纳
如何键入接受ComponentType或string的道具？
假设下面的代码。
interface MyComponentProps {
Component: React.ComponentType
}
const MyComponent: React.FC<PropsWithChildren<MyComponentProps>> = ({Component}) => {
return <Component>{children}</Component>
}
<MyComponent
Component="
浏览 5提问于2022-11-30得票数 1
回答已采纳
C#中有一个nameof运算符，它允许在编译时获取属性名称：
var name = nameof(User.email);
Console.WriteLine(name);
//Prints: email
在flutter中不能使用反射，我也不想硬编码属性的名称，也就是用来查询SQLite表。有什么变通方法吗？
*我目前使用的是built_value库。
浏览 0提问于2018-12-12得票数 14
我有一种类型，我重复了很多次，但差别很小：
import { ComponentPropsWithRef, ElementType } from "react";
interface PackshotPropsBase {
a: string
}
interface PackshotPropsWeb {
b: string
}
export type ElementAndPackshotProps<T extends ElementType, P extends PackshotPropsBase> = Omit<
ComponentPr
浏览 8提问于2022-07-20得票数 0
回答已采纳
1回答
我有一个组件，它的根节点可以用传递的prop的值覆盖。 interface Props {
propA?: string
as?: React.ElementType
}
const OverridableComponent = (props: Props) => {
const { as: Tag = 'div', ...otherProps } = props
return <Tag {...props} />
} 以及另一个将用作as的组件。 interface SomeComponentProps {
propB: strin
浏览 11提问于2019-09-02得票数 1
伙计们，有没有办法将Annotation作为直接参数传递(而不是做所有的反射开销)？例如，在下面的代码中，我有一个包含int值的注释号，我想作为参数传递给addImpl方法，我该如何做到这一点(除了通过反射)？
代码片段：
@Retention(RetentionPolicy.RUNTIME)
@Target({ElementType.METHOD, ElementType.PARAMETER, ElementType.FIELD})
public @interface Number {
int value();
}
public void add(int x2) {
add
浏览 264提问于2010-07-19得票数 30
回答已采纳
我正在使用React-Router v4在我的React应用程序中导航。下面是包装在withRouter()函数中的一个组件，使其能够在单击时更改路由：
const LogoName = withRouter(({history, props}) => (
<h1
{...props}
onClick={() => {history.push('/')}}>
BandMate
</h1>
));
正如您所看到的，我将props传递给组件，这是更改组件的类所需的。这里的问题是props在<LogoName&
浏览 10提问于2017-07-22得票数 11
回答已采纳
我在Array.ts中有以下声明，充当Array<T>.flat()和Array<T>.flatDeep()的助手类型和声明。
export {}
type ElementType<T> = T extends (infer U)[] ? U : T;
type JaggedArrayItem<T> = T | JaggedArray<T>;
type JaggedElementType<T> = T extends JaggedArray<infer U> ? U : T;
interface Jagged
浏览 0提问于2019-07-09得票数 1
我读过，这是关于createRef()的内容
createRef()接收基础DOM元素作为其当前属性。在自定义类组件上使用ref属性时，ref对象接收组件的挂载实例作为当前实例。
我对此有一些疑问。首先看看下面的组件。
import React, { Component } from "react";
class ImageCard extends Component {
constructor(props) {
super(props);
this.imageRef = React.createRef();
console.log(
浏览 3提问于2020-12-23得票数 13
回答已采纳
1回答
我已经使用React的“@nivo/散点图”创建了一个图表。我可以在图形定义中使用像colors='#FF0000'这样的东西成功地为所有点设置颜色，但是我不知道如何设置单个点的颜色(例如，基于它的值)。我不想应用nivo方案，因为它适用于每个组，我想应用每个点，并控制每个点的颜色。有没有办法做到这一点？
浏览 14提问于2020-09-01得票数 0
我对原生的反应是全新的。目前正在探索FontAwesome 5专业版图标的react原生矢量图标。 https://github.com/oblador/react-native-vector-icons FontAwesome 5的图标集有3种类型，分别为常规、实心和浅色。 import Icon from 'react-native-vector-icons/FontAwesome5';
const myIcon1 = <Icon name="comments" size={30} color="#900" />; // De
浏览 37提问于2019-03-14得票数 4
回答已采纳
我在React中有一个组件，它显示了一个基于属性的导航。当我尝试运行应用程序时，我不知道为什么会出现这个错误：
(19,8): Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<TableSystems> & Readonly<{ children?: ReactNode; }...'.
Type '{}' is not assignable to type 'Readonly<
浏览 0提问于2018-07-03得票数 7
回答已采纳
2回答
我在github或index.d.ts of the package react.markdown上都找不到任何东西。它看起来很简单的例子，但整个谷歌不包含任何例子。我为减价组件编写了自定义呈现器，但无法确定呈现器的类型。
import ReactMarkdown, { Renderers, Renderer, NodeType } from "react-markdown";
const PostContent: React.FC<PostContent> = ({ blog }) => {
const customRenderers: Rendere
浏览 1提问于2021-03-14得票数 0
回答已采纳
我的项目包括一个web服务，但我不知道是什么类型。除了文件扩展名".svc“，这意味着在VS中是否有其他与web服务相关的元数据。
同样，如果我在VS中有一个项目，有没有办法让我知道它是哪种类型的项目？我在属性选项卡下看不到任何内容。
浏览 2提问于2017-03-21得票数 0
我有一个函数组件MyComponent，我正在尝试为component设置一个默认的支柱，这样如果没有提供，根节点将呈现为"span“。但我得到了以下错误：
TS2604: JSX element type 'Component' does not have any construct or call signatures.
interface IMyComponentProps {
component?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
}
const MyCom
浏览 0提问于2019-10-31得票数 10
3回答
我正在实现一个使用Json生成的表单。从API中检索Json，然后遍历呈现输入元素的项。这是Json的样本：
{
name: {
elementType: 'input',
label: 'Name',
elementConfig: {
type: 'text',
placeholder: 'Enter name'
},
value: '',
validation: {
required: t
浏览 4提问于2021-05-22得票数 1
回答已采纳
1回答
我试图将一个自定义类型划分回它的各个元素中：
type CustomType<T extends React.ElementType> = React.ComponentPropsWithoutRef<T> & { aBunchOfProps: string; }
代码如下：
const partitionProps = <T extends React.ElementType>(
props: CustomType<T>
): {
customProps: { aBunchOfProps: string }, // named
浏览 1提问于2021-11-01得票数 1
回答已采纳
1回答
我对打字很陌生，开始了一个简单的项目。我有一个侧边栏组件，它由几个sidebarNavigationItem组件组成。每个边栏项目都有一个图标和标题，如下所示。
Sidebar.tsx
import SidevarNavigationItem from "./SidevarNavigationItem"
import { HomeIcon } from "@heroicons/react/24/solid"
import { StarIcon } from "@heroicons/react/24/solid"
const Sidebar =
浏览 3提问于2022-09-30得票数 2
回答已采纳
我在我的项目中使用了React-ckeditor 5包。我得到一个未序列化的html数据，我正在使用React- html -parser包将其解析为html模板，并将此解析后的数据传递给ckeditor，以便以可编辑的格式显示。
下面是代码：
<CKEditor
editor={ getEditor(this.props.editor) }
data= {ReactHtmlParser(this.props.html)}
onChange={ ( event, editor ) =>
浏览 61提问于2019-08-01得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
