Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PageHeader tags property throw errors in typescript #16092

Closed
wenchao24 opened this issue Apr 15, 2019 · 2 comments

Comments

Projects
None yet
4 participants
@wenchao24
Copy link

commented Apr 15, 2019

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Edit on CodeSandbox

Steps to reproduce

run by typescript

What is expected?

no error throws

What is actually happening?

Though it works well on codesanbox, in my local project Typescript will throw an error when writing things like <PageHeader title="title" tags={<Tag color="red">Failed</Tag>} />

TS2322: Type 'Element' is not assignable to type 'Tag[]'.

you may try <PageHeader title="title" tags={[<Tag color="red">Failed</Tag>]} />, but just got another one: Type 'Element[]' is not assignable to type 'Tag[]'.

Environment Info
antd 3.16.3
React 16.6.3
System win10
Browser Google Chrome 73.0.3683.103 (Official Build) (64-bit)

Why d.ts for PageHeaderProps is tags?: Tag[]; ?

can it be tags?: React.ReactNode; ?

that will solve my problem.

writing like <PageHeader title="title" tags={[new Tag({color: "red", children: 'Failed'})]} /> can eliminate the type error, but it comes out a react-dom error:

Uncaught Error: Objects are not valid as a React child (found: object with keys {props, context, refs, updater, state, handleIconClick, renderTag}). If you meant to render a collection of children, use an array instead.

react-dom.development.js?f8c1:15749 The above error occurred in the component:
in span (created by Context.Consumer)
in div (created by Context.Consumer)
in div (created by Context.Consumer)
in PageHeader (created by LogView)

react-dom.development.js?f8c1:55 Uncaught Error: Objects are not valid as a React child (found: object with keys {props, context, refs, updater, state, handleIconClick, renderTag}). If you meant to render a collection of children, use an array instead.

So, I am wondering. What's the right way to use it? THX

@ztplz

This comment has been minimized.

Copy link
Collaborator

commented Apr 15, 2019

As your codeandbox demo doesn't reproduce the problem, could you build a mini repo?

@ant-design-bot

This comment has been minimized.

Copy link

commented Apr 15, 2019

Hello @wenchao24. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

你好 @wenchao24, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。7 天内未跟进的 issue 将会被自动关闭。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.