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

IT技术 reactjs
2021-05-13 12:41:22

我有一个这样的组件：

<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>容器外有效。例如，如果像下面这样使用它，它将产生类似“错误：DialogHead 必须嵌套在对话框组件中”的错误

<div>
    <DialogHead>
        Title Here
    </DialogHead>
</div>
2个回答

我认为您可以使用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>

这是参考：遏制

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>
其它你可能感兴趣的问题
上一篇Promise allSettled 不是函数 下一篇在 Reactjs 中实现搜索过滤器的问题-触发问题