Catatan saya memberikan jawaban yang lebih mendalam di sini
Pembungkus Runtime:
Itu cara yang paling idiomatis.
const Wrapper = ({children}) => (
<div>
<div>header</div>
<div>{children}</div>
<div>footer</div>
</div>
);
const App = () => <div>Hello</div>;
const WrappedApp = () => (
<Wrapper>
<App/>
</Wrapper>
);
Perhatikan bahwa itu children
adalah "prop khusus" dalam Bereaksi, dan contoh di atas adalah gula sintaksis dan (hampir) setara dengan<Wrapper children={<App/>}/>
Pembungkus inisialisasi / HOC
Anda dapat menggunakan Komponen Pesanan Tinggi (HOC). Mereka telah ditambahkan ke dokumen resmi baru-baru ini.
// Signature may look fancy but it's just
// a function that takes a component and returns a new component
const wrapHOC = (WrappedComponent) => (props) => (
<div>
<div>header</div>
<div><WrappedComponent {...props}/></div>
<div>footer</div>
</div>
)
const App = () => <div>Hello</div>;
const WrappedApp = wrapHOC(App);
Hal ini dapat menyebabkan (sedikit) kinerja yang lebih baik karena komponen pembungkus dapat membuat hubungan pendek rendering selangkah lebih maju dengan shouldComponentUpdate, sementara dalam kasus pembungkus runtime, anak-anak cenderung akan selalu menjadi ReactElement yang berbeda dan menyebabkan pengubahan ulang. bahkan jika komponen Anda memperpanjang PureComponent.
Perhatikan bahwa connect
Redux dulu merupakan pembungkus runtime tetapi diubah menjadi HOC karena memungkinkan untuk menghindari rendering ulang yang tidak berguna jika Anda menggunakan pure
opsi (yang benar secara default)
Anda seharusnya tidak pernah memanggil HOC selama fase render karena membuat komponen Bereaksi bisa mahal. Anda sebaiknya memanggil pembungkus ini saat inisialisasi.
Perhatikan bahwa ketika menggunakan komponen fungsional seperti di atas, versi HOC tidak memberikan optimasi yang berguna karena komponen fungsional stateless tidak diimplementasikan shouldComponentUpdate
Penjelasan lebih lanjut di sini: https://stackoverflow.com/a/31564812/82609
this.props.children
adalah bagian dari komponen API dan diharapkan dapat digunakan dengan cara ini. Contoh-contoh tim Bereaksi menggunakan teknik ini, seperti dalam mentransfer alat peraga dan ketika berbicara tentang seorang anak tunggal .