What's the correct way to bind a React component with reserved keywords as prop names?

I’m not sure, what you are actually trying to ask, since your code example seems alright.

I believe name-mangling (special handling for names containing underlines at specific positions) was recently changed.
Because we have @as("name") and \"name". I added the second possibility to your example:
Example in playground

module Example = {
  @react.component @module("@headlessui/react")
  external make: (
    ~onClose: unit => unit,
    @as("open") ~open_: bool=?,
    ~children: React.element=?,
    ~className: string=?,
    ~\"as": string=?,
  ) => React.element = "Dialog"

  module Panel = {
    @react.component @module("@headlessui/react") @scope("Dialog")
    external make: (
      ~children: React.element,
      ~className: string=?,
    ) => React.element = "Panel"
  }

  module Title = {
    @react.component @module("@headlessui/react") @scope("Dialog")
    external make: (
      ~children: React.element,
      ~className: string=?,
      @as("as") ~_as: string=?,
    ) => React.element = "Title"
  }
}

let noop = () => ()

let x = <Example onClose=noop open_=true \"as"="as" />