Menu
Quick question for react gurus ;)
React.Children.only is one of its top-level apis, and is very commonly used by react-redux (<Provider />) and React Router (<Router />) to inject store/router as context, what's the reason behind this, why not simply return props.children? Seems something to do with JSX?
EDIT: Please don't explain what is React.Children.only, i am asking for why using it instead of props.children, which seems more powerful/flexible.
610
You can use props. children in React in order to access and utilize what you put inside the open and closing tags when you are creating an instance of a component.
Components always re-render There is a common misconception that a React component will not re-render unless one of its properties changes. This is not true: React does not care whether “props changed” - it will render child components unconditionally just because the parent rendered!
This is needed because the Button component uses the React. Children. only function to verify that the children prop only has one child and returns it. Otherwise the method throws an error.
As said, there is no way passing props from a child to a parent component. But you can always pass functions from parent to child components, whereas the child components make use of these functions and the functions may change the state in a parent component above.
As pointed out in the docs
Verifies that children has only one child (a React element) and returns it. Otherwise this method throws an error.
So now why is it helpful over just using props.children?
The main reason is it's throwing an error, thus halting the whole dev flow, so you cannot skip it.
This is a handy util that enforces a rule of having specifically and only one child.
Of course, you could use propTypes, but that will only put a warning in the console, that you might as well miss.
One use case of React.Children.only can be to enforce specific declarative interface that should consist of one logical Child component:
class GraphEditorEditor extends React.Component { componentDidMount() { this.props.editor.makeEditable(); // and all other editor specific logic } render() { return null; } } class GraphEditorPreview extends React.Component { componentDidMount() { this.props.editor.makePreviewable(); // and all other preview specific logic } render() { return null; } } class GraphEditor extends React.Component { static Editor = GraphEditorEditor; static Preview = GraphEditorPreview; wrapperRef = React.createRef(); state = { editorInitialized: false } componentDidMount() { // instantiate base graph to work with in logical children components this.editor = SomeService.createEditorInstance(this.props.config); this.editor.insertSelfInto(this.wrapperRef.current); this.setState({ editorInitialized: true }); } render() { return ( <div ref={this.wrapperRef}> {this.editorInitialized ? React.Children.only( React.cloneElement( this.props.children, { editor: this.editor } ) ) : null } </div> ); } } which can be used like this:
class ParentContainer extends React.Component { render() { return ( <GraphEditor config={{some: "config"}}> <GraphEditor.Editor> //<-- EDITOR mode </GraphEditor> ) } } // OR class ParentContainer extends React.Component { render() { return ( <GraphEditor config={{some: "config"}}> <GraphEditor.Preview> //<-- Preview mode </GraphEditor> ) } } Hope this is helpful.
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
