React：在特定父级下强制执行子组件

Question

我有一个这样的组件：

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

下面这个是<Dialog>渲染代码

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

如何强制在父元素下添加子元素？我的意思是，<DialogHead>、<DialogBody> 和 <DialogFoot> 在 <Dialog> 容器之外不应该有效。比如下面这样使用，就会产生类似“ERROR: DialogHead must be nested in Dialog Component”的错误

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

Answer 1

我认为您可以使用 Containment 的概念，其中 Dialog 组件将是：

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

Answer 2

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>