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.

Sign up for GitHub

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

Jump to bottom

Support multiple child insertion points #848

Closed
necolas opened this issue Jan 8, 2014 · 3 comments
Closed

Support multiple child insertion points #848

necolas opened this issue Jan 8, 2014 · 3 comments

Comments

@necolas
Copy link
Contributor

necolas commented Jan 8, 2014

Briefly spoke to @petehunt about this. Tracking it with an issue.

There are times when having multiple insertion points would be useful. The old Web Components spec was looking to do this with the select attribute of content - http://www.w3.org/TR/components-intro/#insertion-points. I'm not sure what the current W3C plans are.

Pete said that this could be done for now by passing other children in as props. But it feels like a hack.

Riffing on that old spec's idea, something vaguely like this:

<div>
  <div class="header">
    { select(this.props.children, '.title') }
  </div>
  { this.props.children }
</div>

Where the .title string is a CSS selector, and any matching elements are removed from the children to avoid duplicate insertion.
@vjeux
Copy link
Contributor

vjeux commented Jan 8, 2014

@subtleGradient proposed the following:

<Card>
  <Title insertAsProps="title" ... />
  <Body insertAsProps="body" ... />
</Card>

That would be the equivalent of doing

<Card
  title={<Title ... />}
  body={<Body ... />}
/>

EDIT: insertAsProps prop isn't needed when passed as a prop value.

@vjeux
Copy link
Contributor

vjeux commented Jan 8, 2014

A React component can be seen a function. It's arguments are props and local variables is state. If you think as it this way, it actually make sense to pass the title as a prop. What's inside of the tag has a special meaning which is children. It feels like a hack to manipulate and modify the children to split them into different groups.

@necolas
Copy link
Contributor Author

necolas commented May 15, 2014

Yeah, using props is nice once you think in terms of functions. Thanks

@necolas necolas closed this as completed May 15, 2014
@tiye tiye mentioned this issue Oct 10, 2014
Closed
This was referenced Sep 14, 2016
Closed
Closed
@snyk-bot snyk-bot mentioned this issue Aug 4, 2021
Open
@snyk-bot snyk-bot mentioned this issue Aug 31, 2021
Open
This was referenced Nov 27, 2023
Open
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@vjeux @necolas