React как рендерить несколько элементов в одном JSX элементе?

Question

[herasko-sg]

У меня есть функциональный компонент темы, который является провайдером темы(AppThemeProvider), и есть отдельный компонент для кнопки AppThemeButton, чтоб менять тему. Есть возможность разместить эти 2 компонента в одном(AppTheme) так, чтобы при написании AppTheme.Provider возвращался провайдер темы, а при написании AppTheme.Button кнопка смены темы. Желательно, чтоб этот компонент был функциональный, а не классовым.

Answer 1

[Aetae]

AppTheme.js:

import AppThemeProvider from './AppThemeProvider.jsx';
import AppThemeButton from './AppThemeButton.jsx';

export default {
  Button: AppThemeButton,
  Provider: AppThemeProvider
}

Да, это обычный javascript, реакт тут не при чём.

Comments

[herasko-sg]

const AppTheme = {
  Button: AppThemeButton,
  Provider: AppThemeProvider
}
export const AppTheme;