React:在特定父组件下强制子组件

我想你可以用 安全壳 ,在哪里 对话框 组件将是:

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

<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>

这是参考资料: Containment

React Context API

// 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
}

自React 16.3以来的新上下文API+

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>