Skip to content

Instantly share code, notes, and snippets.

@aselbie
Created August 31, 2017 18:05
Show Gist options
  • Save aselbie/18aae73497e11259c09f0ebeba1bbec2 to your computer and use it in GitHub Desktop.
Save aselbie/18aae73497e11259c09f0ebeba1bbec2 to your computer and use it in GitHub Desktop.
Function as Child compared to cloneElement
class MyComponent extends React.Component {
render() {
return (
<div>
{React.cloneElement(React.Children.only(this.props.children), {
name: 'Scuba Steve',
})}
</div>
);
}
}
MyComponent.propTypes = {
children: React.PropTypes.node.isRequired,
};
const MyChildComponent = (props) => <img src=’/scuba-steves-picture.jpg’ alt={props.name} />
<MyComponent>
<MyChildComponent />
</MyComponent>
class MyComponent extends React.Component {
render() {
return (
<div>
{this.props.children('Scuba Steve')}
</div>
);
}
}
MyComponent.propTypes = {
children: React.PropTypes.func.isRequired,
};
<MyComponent>
{(name) => (
<img src=’/scuba-steves-picture.jpg’ alt={name} />
)}
</MyComponent>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment