Bertindak balas terhadap komponen pihak ketiga gaya asli dengan menambahkan pembalut

Question

Soalan saya:

Saya cuba menambah gaya saya sendiri pada komponen yang disediakan oleh react-native-popup-menu dan menambahkannya pada pustaka komponen saya. Mereka menyediakan komponen Menu, MenuOptions dan MenuOption dengan hierarki yang dijangkakan berikut:

<Menu>
  <MenuOptions>
    <MenuOption text="A">
    </MenuOption>
    <MenuOption text="B">
    </MenuOption>
  </MenuOptions>
</Menu>

Saya merancang untuk membuat pembungkus untuk setiap elemen, menggayakan komponen di dalamnya dan mengembalikan pembungkus apabila seseorang mengimportnya daripada pustaka komponen.

Sebagai contoh, pembalut untuk komponen menu:

import { MenuProps } from 'react-native-popup-menu';

type CustomMenuProps = {
  children: React.ReactElement[];
}

const CustomMenu = (props: MenuProps && CustomMenuProps) => {
  return <Menu style={{...someCustomStyle}}>{children}</Menu>
}

Ini menambahkan pembungkus (elemen tambahan) pada setiap lapisan, menghasilkan hierarki berikut:

<CustomMenu>
  <Menu>
    <CustomMenuOptions>
      <MenuOptions>...

Pakej tidak menyukai ini kerana ia bergantung pada hierarki untuk memaparkan menu dengan betul. Melempar ralat "MenuOptions harus menjadi anak Menu"

Adakah terdapat cara untuk mencipta menu gaya tersuai dan mendedahkannya sebagai komponen dalam perpustakaan komponen? Jika ia bertindak balas, saya akan menulis semula kelas css, tetapi tiada kesan melata dalam react-native.

Sebarang petunjuk akan sangat membantu. Terima kasih.

Answer 1

Saya tidak pasti apa masalahnya - jadi saya hanya menambah beberapa petua/petunjuk di sini yang mungkin membantu anda.

Lihat dokumentasi https://github.com/instea/react-native-popup-menu/blob/master/doc/extensions.md dan contoh

yang sepadan

Daripada ini saya nampak anda boleh melakukan/menggunakan perkara berikut:

1. Gaya MenuOptions disokong secara asli tanpa sebarang masalah

const CheckedOption = (props) => (
      <MenuOption value={props.value} text={'\u2713 ' + props.text} />
    )

2. Penggayaan tersuai bagi bekas pilihan nampaknya boleh juga

<菜单渲染器={RoundedContextMenu}>

Anda hanya memerlukan sedikit boilerplate (lihat contoh) - Saya rasa membungkus ini menjadi komponen tersuai tidak menjadi masalah

3. Sebarang gaya "kiri" adalah pencetus yang menerima mana-mana kanak-kanak...tidak pasti sama ada ini boleh dibungkus dengan mudah ke dalam komponen anda sendiri sekarang...