CODEWITHSUNDEEP
reactjs
Magician
Magician

Reputation: 2113

React: Enforcing a child component under specific parent

I have a components like this:

<Dialog id="_login" modal={true} onSubmit={() => console.log("x")} onCancel={() => console.log("C")} visible={true} >
    <DialogHead>
        Title Here
    </DialogHead>
    <DialogBody>
        <Field id="username" label="User Name" onChange={(id, value) => { console.log(id, value) }} />
        <Field id="password" label="Password" onChange={(id, value) => { console.log(id, value) }} />
    </DialogBody>
    <DialogFoot>
        <button onClick={e => console.log(e)}>Close</button>
    </DialogFoot>
</Dialog>

This below is <Dialog> render code

public render() {
    return <div className="hx-dialog-outer" onClick={this.onCancel.bind(this)}>
        <div className="hx-dialog-inner" onClick={(e) => {e.stopPropagation()}}>
            <form name={this.props.id}>
                {this.props.children}
            </form>
        </div>
    </div>
}

How do I force a child element under parent element? I mean, <DialogHead>, <DialogBody> and <DialogFoot> should not valid outside <Dialog> container. For example, if it being used like this below, it will produce an error like "ERROR: DialogHead must be nested in Dialog Component"

<div>
    <DialogHead>
        Title Here
    </DialogHead>
</div>

Upvotes: 1

Views: 714

Answers (2)

Allen
Allen

Reputation: 4779

React Context API might be what you want.

// Parent <Dialog/>
class Dialog extends React.Component {
  static childContextTypes = {
    dialog: PropTypes.object.isRequired
  }
  getChildContext() {
    return {
      dialog: this.props.dialog
    }
  }
}

// Children <DialogHeader/>, <DialogBody/>, <DialogFooter/>
const DialogHeader = (props, context) {
  if (context.dialog == null)
    throw new Error('You should not use <DialogHeader/> outside a <Dialog/>')
  // return some markup
}

DialogHeader.contextTypes = {
  dialog: PropTypes.object.isRequired
}

w/ new context API since React 16.3+

const {Provider: DialogProvider, Consumer: DialogConsumer} = React.createContext(null)

const Dialog = props =>
  <DialogProvider value={{dialog: props.dialog}}>
    {props.children}
  </DialogProvider>

const DialogHeader = props =>
  <DialogConsumer>
    {({ dialog }) => 
      if (dialog == null) return new Error()
      // return some markup
    }
  </DialogConsumer>

Upvotes: 1

David Leonardo Molina Ruiz Dav
David Leonardo Molina Ruiz Dav

Reputation: 231

I think you could use the concept of Containment, where Dialog component would be:

function Dialog (props) {
  return (
    <div>
      {props.children}
    </div>
  );
}

and now you can use this:

<Dialog id="_login" modal={true} onSubmit={() => console.log("x")} onCancel={() => console.log("C")} visible={true} >
    <DialogHead>
        Title Here
    </DialogHead>
    <DialogBody>
        <Field id="username" label="User Name" onChange={(id, value) => { console.log(id, value) }} />
        <Field id="password" label="Password" onChange={(id, value) => { console.log(id, value) }} />
    </DialogBody>
    <DialogFoot>
        <button onClick={e => console.log(e)}>Close</button>
    </DialogFoot>
</Dialog>

This is the reference: Containment

Upvotes: 1

Related Questions