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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Clone only valid react child elements #17207

Merged
merged 3 commits into from Jun 21, 2019

Conversation

superandrew213
Copy link
Contributor

@superandrew213 superandrew213 commented Jun 20, 2019

馃 This is a ...

  • New feature
  • Bug fix
  • Site / document update
  • Component style update
  • TypeScript definition update
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

馃懟 What's the background?

React.cloneElement will throw error if child is not a valid element. Child can be void | null | boolean | string | number too. These are not valid react elements.

馃挕 Solution

Use React.isValidElement(child) to check for valid element before cloning child.

馃摑 Changelog

No risk or breaking changes.

鈽戯笍 Self Check before Merge

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

child can be void | null | boolean | string | number | element.
@netlify
Copy link

netlify bot commented Jun 20, 2019

Deploy preview for ant-design ready!

Built with commit 38e9c06

https://deploy-preview-17207--ant-design.netlify.com

@codecov
Copy link

codecov bot commented Jun 20, 2019

Codecov Report

Merging #17207 into master will decrease coverage by 0.01%.
The diff coverage is 66.66%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #17207      +/-   ##
==========================================
- Coverage   95.95%   95.94%   -0.02%     
==========================================
  Files         263      263              
  Lines        7348     7350       +2     
  Branches     2051     2041      -10     
==========================================
+ Hits         7051     7052       +1     
- Misses        295      296       +1     
  Partials        2        2
Impacted Files Coverage 螖
components/descriptions/index.tsx 97.33% <66.66%> (-1.3%) 猬囷笍

Continue to review full report at Codecov.

Legend - Click here to learn more
螖 = absolute <relative> (impact), 酶 = not affected, ? = missing data
Powered by Codecov. Last update d65fdac...38e9c06. Read the comment docs.

@afc163
Copy link
Member

afc163 commented Jun 20, 2019

What the exact problem you meet?

@superandrew213
Copy link
Contributor Author

superandrew213 commented Jun 21, 2019

@afc163 this won't work at the moment.

const a = false

return (
  <Descriptions title="Title">
    <Descriptions.Item label="Item">{value}</Descriptions.Item>

    {a && (
      <Descriptions.Item label="ConditionalItem">
        {value}
      </Descriptions.Item>
    )}

  </Descriptions>
)

@afc163
Copy link
Member

afc163 commented Jun 21, 2019

Could you add a test case?

@afc163 afc163 changed the title Clone only valid react child elements fix: Clone only valid react child elements Jun 21, 2019
@afc163 afc163 merged commit 07c85ea into ant-design:master Jun 21, 2019
20 checks passed
@afc163 afc163 mentioned this pull request Jun 21, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants