如何输入可能有道具的ReactNode？
在React中，可以通过创建自定义组件来实现输入可能有道具的ReactNode。下面是一个示例：
首先，创建一个自定义组件CustomComponent，它接受一个名为content的属性：
import React from 'react';
const CustomComponent = ({ content }) => {
return (
<div>
{content}
</div>
);
}
export default CustomComponent;然后，在使用CustomComponent的父组件中，可以传入任意的React节点作为content属性的值，包括其他组件、HTML元素或文本。例如：
import React from 'react';
import CustomComponent from './CustomComponent';
const ParentComponent = () => {
const nodeWithProps = <span style={{ color: 'red' }}>Hello</span>;
return (
<div>
<CustomComponent content={nodeWithProps} />
</div>
);
}
export default ParentComponent;在上面的例子中，我们创建了一个带有样式的span节点，并将其作为content属性传递给CustomComponent组件。CustomComponent会渲染content属性中传入的节点，最终在页面上显示为红色的"Hello"。
总结： 输入可能有道具的ReactNode可以通过创建自定义组件来实现。在自定义组件中，可以接受一个属性作为React节点，并将该属性渲染到组件内部以实现所需的效果。
相关·内容
1回答
我很难输入下面的动态按钮组件，它可以处理链接或onClick事件。这是我现在尝试重构为TypeScript的组件的一个简化片段。
import React from 'react'
import { Link } from 'react-router-dom'
type Props = {
children: React.ReactNode,
} & (
{
to: string,
type: undefined,
onClick: undefined,
} | {
to: undefined,
ty
浏览 4提问于2022-11-10得票数 0
1回答
我编写了一个特殊的函数，我无法正确地输入(这是预料中的，因为我是TypeScript初学者，甚至是一个类型的初学者)。以下是功能：
const withLayout = (LayoutComponent, layoutProps = {}) => (WrappedComponent) => {
return function WithLayout(props) {
return (
<LayoutComponent {...layoutProps}>
<WrappedComponent {...props} />
浏览 2提问于2021-03-15得票数 0
回答已采纳
2回答
export function TodosContextProvider( {children}: {children: React.ReactNode}, props: any) {
const [todos, dispatch] = React.useReducer(todosReducer, [
{
Id: 1,
Title: 'Learn Context API',
Done: true
},
{
Id: 2,
Title: 'Lear
浏览 3提问于2020-02-28得票数 0
回答已采纳
我正在创建一个带有类型记录的库，并有一个问题。在创建可重用组件时，是否必须声明类型/接口中的每个输入属性？
我有一个使用样式组件创建的输入字段，如下所示：
import React from 'react';
import { StyledInput } from './styles';
interface Props {
type?: 'text' | 'password' | 'number' | 'tel' | 'time';
name: string;
}
co
浏览 2提问于2020-07-04得票数 1
回答已采纳
2回答
如何使用tsx在reactjs中将对象传递给子组件。当我这样做的时候，我就会犯这个错误。在哪里可以声明类型？Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ShipmentCard>
Cards.tsx
render() {
return (
<div>
{this.state.card.map((card: any) => (
<Shipm
浏览 0提问于2019-08-04得票数 4
回答已采纳
我在类型记录中有一个自定义的React组件：
const MyButton: React.FC = ({children, ...props}) => {
return (<button {...props}>{children}</button>)
}
当我尝试使用这个组件时，添加一个DOMAttribute (例如onClick)：
<MyButton onClick={() => console.log("clicked")}></MyButton>
我知道这个错误：
Type '{ onClick:
浏览 1提问于2019-12-01得票数 1
回答已采纳
嘿，伙计们，我从typescript中得到了这个错误：Property does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'，我导出了一个默认的接口，叫做iCustomer，我可以在我的项目中使用它。但现在我把它导入了CustomerViewList，因为我懒得在输入道具的时候重复我自己。 在那之后，我想导入视图并在我的平面列表上使用它，现在我得到了这个错误。 ?
浏览 189提问于2021-04-18得票数 2
回答已采纳
1回答
我想传递一个包装组件作为一个支柱。
我试过这个：
type HeaderProps = {
Wrapper: ReactNode;
}
const Header = ({ Wrapper }: HeaderProps) => {
return (
<Wrapper>
<button>click me</button>
</Wrapper>
)
}
但它会导致一个错误：
JSX element type 'Wrapper' does not have any construct or
浏览 8提问于2022-10-21得票数 1
为什么这样做：
interface UserSidebarProps {
children? : React.ReactNode
}
function UserSidebar({children}: UserSidebarProps) {
return (
<div>
{children}
</div>
)
}
但这不是
function UserSidebar(children?: React.ReactNode) {
return (
<div>
{children}
</d
浏览 20提问于2022-09-08得票数 0
回答已采纳
我正在开发一个反应应用程序。我正在使用Materia自动完成作为输入输入，在提示的帮助下输入地址。一切都很好，但我希望自定义Autocomplete元素，使其可视化一种类型的页脚。
这是我的PaperComponent：
const PaperComponent = ( children: any ) => (
<Card>
{children}
<div> content </div>
</Card>
)
这是我的自动完成：
<Autocomplet
浏览 0提问于2020-10-08得票数 1
回答已采纳
我有一个这样的组件：
type TPage = {
title: string;
};
const Page = React.memo(({ children, title, ...rest }: TPage) => {
return (
<div {...rest}>
<div>{title}</div>
{children}
</div>
);
});
我把它当做
<Page
title="Title"
style={{
浏览 15提问于2020-11-18得票数 4
我得到了以下错误，但我无法弄清楚如何解决它，有人可以帮助我解决。
下面也是与完整代码的博览会链接。
小吃博览会报告的<AppIntroSlider />错误
示例：
输入'{ ref：(ref: any) => any；data：{ key: string；title: string；backgroundColor: string；}[]；renderItem：({ item }：any) =>元素；renderPagination：(activeIndex: number) =>元素；scrollX：(scrollXList: an
浏览 1提问于2020-12-05得票数 0
当一个按钮被点击时，我正试图重定向到一个注册页面，但是，我收到了一个“no overload matches this call error”。我试着在谷歌上搜索这个错误，但它似乎相当宽泛，而且我对Typescript还很陌生，所以不确定如何修复它。 我应该如何修复这个错误，当点击按钮时，我应该如何显示注册表单？ // Main.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, useRouteMatch
浏览 1305提问于2020-06-20得票数 4
我正在做一个反应组件，其中我希望有一个组件有特定的孩子。
例如：
<Toolbar>
<ContentLeft> ...React nodes[] </ContentLeft>
<ContentRight> ...React nodes[] </ContentRight>
</Toolbar>
在实际工具栏组件中，我希望有：
export type ToolbarProps = {
children?: React.ReactNode,
contentLeft: React.ReactNode,
浏览 5提问于2022-06-06得票数 1
1回答
我对打字稿是新手，我不知道如何用它正确地打字。我已经花了一整天的时间想办法解决这个问题，但没有成功。我有一个非常基本的BaseComponent代码片段和一个简单的HOC。由于某些原因，在创建BaseComponent时，我得到的是类型记录错误：
Type '{ total: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<
浏览 6提问于2020-10-22得票数 0
export const PageViewTracker = ({ children }: ReactNode): ReactElement => {
usePageView();
return children;
};
问题：
此函数返回错误?属性‘子“在’ReactNode‘类型上不存在
我的解决方案：
我尝试了几种类型，但只有任何不是我想要的作品。通常我用ReactNode制作儿童道具，效果很好。在这种情况下，TypeScript似乎有问题。
浏览 7提问于2019-11-29得票数 49
回答已采纳
下面的代码是我试图使用类型记录和react本机执行的代码，它给我VSCODE IDE中的类型记录错误。
import { TouchableOpacity } from "react-native";
<TouchableOpacity
primary
transparent
onPress={this.send}
>
<Text style={styles.btnText}>Send</Text>
</TouchableOpacity>
在VSCode中给出了以下类型记录错误：
(alias)
浏览 0提问于2019-11-25得票数 1
我的Reactjs + ElectronJS应用程序在运行它时运行得很好：纱线启动。当我试图用：纱线生成来构建它时，我会得到这个错误。我不明白怎么回事。
Property 'setUser' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
下面是出错的代码：
export const test = () => ({
type: 'TEST',
});
export const setUser = (m
浏览 1提问于2020-08-10得票数 2
回答已采纳
我刚从一个react typescript项目开始，我得到了这个隐秘的错误： Failed to compile.
/Users/simon/Code/web/react-news-col/src/MainNewsFeed.tsx
TypeScript error in /Users/simon/Code/web/react-news-col/src/MainNewsFeed.tsx(27,35):
No overload matches this call.
Overload 1 of 2, '(props: {} | Readonly<{}>): NewsFee
浏览 665提问于2021-06-29得票数 1
我正在向我的组件传递一个SVG图标道具，它是一个包含SVG组件数据的数组，但它在typescript中显示了此错误，我正在使用material UI Type '{ key: number; data: { id: number; icon: ReactNode; }; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "inher
浏览 35提问于2021-10-28得票数 1
回答已采纳
试图把逻辑和设计分开。
下面是我试图解决的问题的简化版本。
import React, { ReactNode } from "react"
interface ChildProps {
id: string
}
const Child = function (props: ChildProps) {
return <div id={props.id} />
}
interface ParentProps {
id: string
node: ReactNode
}
const Parent = function (props: Parent
浏览 2提问于2020-07-29得票数 3
回答已采纳
我使用类型记录创建了这个程序：
import React, {FC} from 'react';
interface Interface {
name:string,
age:number
}
const Home: React.FC<Interface> = (info) => {
return (
<div>
<h1>{info.name}</h1>
</div>
);
};
export default Home;
浏览 2提问于2020-10-05得票数 1
回答已采纳
我正在尝试将这个计算器应用程序转换成TypeScript。
这三个函数，(handleClick，handleEqual，handleClear)为什么不对我大喊大叫来说明它们函数的类型呢？只有一个参数，即一个数字，是我为val:number指定的参数类型。但这真的是我需要的吗？
是否有您推荐的网站可以帮助确定类型？看上去很混乱。
导入React，从‘react’导入{ useState }；从‘mathjs’导入*为数学；从‘../styling/App.css’导入{ Button }；从‘./useState’导入{ ClearButton }；从‘./清除-
浏览 1提问于2021-03-16得票数 1
回答已采纳
我正在制作一个自定义链接组件，并将target="_blank"和rel="noreferrer"作为道具传递，并使用分配给<a>的{...props}。
const ExternalLinkTwo: React.FC<{
href: string;
children: ReactNode;
}> = ({ href, children, ...props }) => (
<a href={href} {...props}>
{children}
</a>
);
export def
浏览 2提问于2022-04-07得票数 1
回答已采纳
我想为table、td、tr等创建自定义组件，以便在一个地方对它们进行样式设计。我如何指定这方面的道具？下面的代码是我实现这一目标的尝试，但是我遇到了很多错误，它们说道具不能分配给类型。
import React, { ReactNode, FC } from "react";
interface Props {
children: ReactNode;
}
const Table: FC<Props & HTMLTableElement> = ({ children, ...rest }) => (
<table {...rest}
浏览 3提问于2022-08-01得票数 1
回答已采纳
当它出现在Javascript上时，它就能工作了。但是在typeScript上，说错了。为什么？我该怎么做？
App.tsx
class App extends React.Component<{}, null> {
handleCreate = (data) => {
console.log(data);
}
render() {
return (
<React.Fragment>
<PhoneForm **onCreate**={this.h
浏览 7提问于2020-06-01得票数 0
回答已采纳
我想在TSX组件中实现...rest。根据的说法，这应该是可行的。在下面的app.tsx中，编译器警告出现在'<Container style=.‘行：
import { ReactNode } from "react";
interface IParent {
children?: ReactNode;
}
function Container({ children, ...rest }: IParent) {
return <div {...rest}>{children}</div>;
}
export default
浏览 17提问于2022-09-14得票数 0
回答已采纳
1回答
这是我的代码，基本上我正在学习ReactiveNative并在试图在LinearGradient中传递子程序时出错。
import React, { ReactNode } from "react";
import { LinearGradient } from "expo-linear-gradient"
import { styles } from "./styles"
import { theme } from "../../global/styles/theme"
type Props = {
children:
浏览 5提问于2022-04-24得票数 0
回答已采纳
我对TypeScript很陌生，并试图了解如何将React代码转换为被键入的代码。目前，我得到了以下错误：
Property 'openMenu' does not exist on type '{ children?: ReactNode; }'
Property 'toggle' does not exist on type '{ children?: ReactNode; }'
Property 'slidein' does not exist on type '{ children?: ReactN
浏览 0提问于2019-09-30得票数 0
回答已采纳
1回答
我知道反应，我在努力学习打字稿。我正在将以前的项目迁移到类型记录中，我遇到了一些问题。我想从父母那里得到一个孩子的道具，用它做一些事情，但是打字稿不让我做。我只找到了如何传递将它们声明为ReactNode的子类，但没有找到如何使用子道具。
我的代码：
这是子元素
interface DataColumnProps {
label: string;
}
const DataColumn = (props: DataColumnProps) => {
return <>...not important...<>;
};
export default Dat
浏览 5提问于2022-10-21得票数 0
我几天前开始学习使用typescript的react，我得到了这个错误 /home/sotiris/Github/ecommerce-merng-platform/admin/src/components/DashboardHOC/DashboardHOC.tsx
TypeScript error in /home/sotiris/Github/ecommerce-merng-platform/admin/src/components/DashboardHOC/DashboardHOC.tsx(118,22):
No overload matches this call.
Ove
浏览 156提问于2020-12-03得票数 0
回答已采纳
1回答
任意注入样式的样式.组件
、、、
我正在用各种控件填充网格(在本例中:上下计数器和文本框)。
目前，我正在cls成员中注入样式(在本例中可以是wide-input和narrow-input)：
render(): ReactNode {
const input: CellItem[] = [
{ isUpdown: false, cls: 'wide-input' },
{ isUpdown: true, cls: 'narrow-input' },
];
return (
<GridContainer>
浏览 2提问于2019-10-17得票数 0
我试着用钩子做一个上下文，用这样的文字记录来回应：
// StateGlobalContext.ts
import React, { Dispatch, ReactNode, SetStateAction } from "react";
export interface StateGlobalContextType {
loading: boolean
setLoading: Dispatch<SetStateAction<boolean>>
}
export const StateGlobalContext = React.createCo
浏览 2提问于2022-05-07得票数 1
回答已采纳
使用以下代码检查React HOC函数中的组件参数类型失败： import * as React from 'react';
interface FooProps {
foo: string;
bar: string;
}
function withProps<P extends FooProps>(
Comp: React.ComponentType<P>
) {
return class extends React.Component {
render() {
return <Comp foo="
浏览 27提问于2019-01-18得票数 0
2回答
我需要制作一个通用按钮，在其中我将某些属性作为参数传递。其中一个属性是在单击事件时必须执行的函数。
function Boton(props: { name: React.ReactNode , funcion: React.ReactNode }) {
return (<div className="center-div"><IonButton shape="round" onClick={props.funcion}> {props.name}</IonButton></div>);
}
但我得到的是：
浏览 6提问于2020-09-25得票数 0
下面是我的代码，但它不能通过typescript验证 import * as React from "react";
export function makeWrapperFn<P, C extends React.ComponentType >(Comp: C, baseProps = {} ) {
return (props: Partial<P> = {} ) => {
// I want this returned function can override the props
return (<Comp {
浏览 40提问于2021-01-06得票数 1
回答已采纳
我正在做一个React/typescript项目。我正试图把我的头围绕错误TS2322并解决它。
Type '{ submissionsArray: SubmissionProps[]; }' is not assignable to type 'IntrinsicAttributes & SubmissionProps[] & { children?: ReactNode; }'.
Property 'submissionsArray' does not exist on type 'IntrinsicAttribu
浏览 0提问于2020-04-09得票数 1
回答已采纳
假设我有一个组件，它有两个按钮实例：
export interface GridProps {
backButton: any;
nextButton: any;
}
按钮的类型应该是React.ReactNode还是React.ReactElement
因此，要么：
export interface GridProps {
backButton: React.ReactNode;
nextButton: React.ReactNode;
}
或
export interface GridProps {
backButton: React.ReactElement<a
浏览 5提问于2017-12-20得票数 11
回答已采纳
我是React + Typescript的新手，我正在尝试更新我创建的四个计数器，这取决于它们的值。正如您所看到的，每个计数器都有一个键，该键与数组中的id相关联。
但是，当我尝试添加：value={counter.value}，这样值就会更新，而不是每次都从零开始时，我会得到这样的消息：
" No overload matches this call.
Overload 1 of 2, '(props: Readonly<{}>): Counter', gave the following error.
Type '{ key: num
浏览 0提问于2020-03-02得票数 1
回答已采纳
当将React.ReactNode类型用于children时，如果有任何内联条件，则呈现将失败。我目前正在使用SWR来获取数据，因此我得到了如下错误：
“类型”“false而论”、“虚空”、“未定义的”不能分配给键入“ReactNode”。输入'void‘不能指定键入'ReactNode’
我不确定以前React.ReactNode是否允许void，或者它是否只是因为以前的隐式子代而被悄悄地错过了。也许这是一个我应该公开反应或SWR的问题？
之前
我的Reactive17Page组件以前是这样的。关于内隐儿童的急剧变化，有很多信息，但我总是明确地说明我的。也许一个类型的孩子：
浏览 6提问于2022-04-28得票数 2
我们试图在中包装一个类型记录React组件--但是当我们这样做时，我们得到了错误：
TS2345: Argument of type 'typeof MyComponent' is not assignable to parameter of type 'ComponentConstructor<Props & InjectedOnClickOutProps & HandleClickOutside<any>> | ClickOutComponentClass<Props & InjectedOnClickOutPr
浏览 8提问于2021-12-04得票数 0
正在尝试扩展react-native View组件。然而，我在扩展View组件的道具时遇到了麻烦。 下面是我如何扩展Props import { StyleSheet, View, ViewStyle, ViewProps } from "react-native";
interface Props extends ViewProps {
pb?: keyof Size | number;
pt?: keyof Size | number;
pv?: keyof Size | number;
ph?: keyof Size | number;
} 下面是我的自
浏览 14提问于2019-05-08得票数 0
回答已采纳
如何定义只允许将特定的元素类型作为支柱传递给组件？
假设我有一个组件，它有一个支柱divider，应该以某种方式输入它，这样只能将<svg>元素传递给这个支柱。
import { ElementType, ReactElement } from 'react';
type Props = {
divider: ReactElement<'svg'>;
};
export function SVGClipPathSection({ divider: Divider }: Props) {
return (
<div
浏览 17提问于2022-05-25得票数 2
回答已采纳
假设我有一个Button组件。它有一个相应的ButtonProps接口。
interface ButtonProps {
component?: ComponentType;
label: ReactNode;
onClick?: (evt: React.MouseEvent<HTMLButtonElement>) => void;
}
如何以这样一种方式编写ButtonProps：它被自动构建为接受作为component prop传递的所有prop？例如,
import { Link } from 'react-router-dom';
<
浏览 0提问于2020-01-17得票数 1
我用的是React + TypeScript。我有一个场景，其中我必须将一个React.SFC组件传递给另一个组件。我就是这样做的：
Container.tsx
import ChildComp from './ChildComp';
<ParentComponent CustomComp={ ChildComp } someArray={ [1, 2] } />
现在的问题是，我想在ChildComp内部用someArray值迭代这个ParentComponent组件。
这个子组件有它自己的支柱someValue，我向它添加了类型，就像这个子组件可以接受的那样，我
浏览 0提问于2018-10-16得票数 2
回答已采纳
我正在做一个小的家庭项目，以提高我在TS的技能。从服务器获取数据，一切都很好，帖子开始显示没有错误，但后来我决定将代码和地图放在一个单独的组件中，ts立即给了我一个错误： Type '{ posts: IPost[]; }' is not assignable to type 'IntrinsicAttributes & IPost[] & { children?: ReactNode; }'.
Property 'posts' does not exist on type 'IntrinsicAttributes &a
浏览 1103提问于2021-11-08得票数 0
回答已采纳
2回答
尝试扩展Material组件以添加新的道具。
目的是添加一个新的道具：fontSize，它有三个选项- small、medium、large。
button_small
并在css中使用它来进行所需的更改。
根据的资料ui文档，我已经定制了主题，并且它工作得很好。
唯一的问题是尝试更新Button的道具类型不起作用。
对于没有过载匹配的情况，我得到了这个错误，这很明显，因为material组件不知道"fontSize“新道具。
错误TS2769:没有重载匹配此调用。
重载3中的1，‘(道具：{ href: string；}&{ReactNode？&{子？)；颜
浏览 1提问于2021-05-21得票数 10
我做了一个组件
<ConnectWallet setConnected={(t: boolean) => console.log(t)}>
<>test</>
</ConnectWallet>
组件的启动方式如下
import { useState, useEffect } from 'react';
import type { NextPage } from 'next';
declare global {
interface Window {
浏览 3提问于2022-02-20得票数 1
回答已采纳
1回答
我有一个这样的定制按钮：
export enum ButtonTypes {
'button',
'submit',
'reset',
undefined,
}
type CustomButtonProps = {
type: ButtonTypes;
};
const CustomButton: React.FC<CustomButtonProps> = ({
children,
...otherProps
}) => {
return (
<butto
浏览 2提问于2021-03-05得票数 1
回答已采纳
2回答
我尝试将上传的文件传递给父组件和子组件都基于函数的子组件。
我使用的是React，TypeScript和Material。
父母
import React from 'react';
import Child from './Child';
const Parent:React.FC =() => {
const [file, setFile] = React.useState(null);
const onChangeFile = (e:any) => {
setFile(e!.target.files[0]);
}
re
浏览 4提问于2019-12-11得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
