React 全局组件

Question

我有 vue.js 背景，最近才开始研究 React。

我有一个组件：PageContent.jsx，我希望使用它而不必不断导入它以便能够在渲染函数（JSX）中使用它。

在 vue 中，可以使用以下方式全球化组件：

Vue.component(componentName, componentObject)

react中有类似的东西吗？

Answer 1

嗯，React 中没有任何类型的“全局”组件。每个组件都必须作为 prop 导入或传递。如果您想避免向每个文件添加导入，您有几个选择：

1) 创建一个 高阶组件，用于渲染

PageContent

和包装组件。

import PageContent from './PageContent';

const withPageContent = WrappedComponent => {
  return class extends React.Component {
    render () {
      return (
        <PageContent>
          <WrappedComponent />
        </PageContent>
      )
    }
  }
};

export default withPageContent;

// Usage

import withPageContent from './withPageContent';

class MyComponent extends React.Component {
  render () {
    return (
      <div>
        I'm wrapped in PageContent!
      </div>
    )
  }
}

export default withPageContent(MyComponent);

2) 将

PageContent

作为 prop 传递给组件：

import PageContent from './PageContent';

export default class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Child1 content={PageContent} />
        <Child2 content={PageContent} />
      </React.Fragment>
    )
  }
}

// Usage

export default class Child1 extends React.Component {
  render () {
    const PageContent = this.props.content;
    return (
      <PageContent>
        I'm wrapped in PageContent!
      </PageContent>
    )
  }
}

export default class Child2 extends React.Component {
  render () {
    const PageContent = this.props.content;
    return (
      <PageContent>
        I'm wrapped in PageContent!
      </PageContent>
    )
  }
}

Answer 2

我非常同意Chase的回答。 不过，如果您需要其他方法，您可以使用 context api。您可以在应用程序根目录或另一个嵌套组件树中声明您想要轻松访问的组件集合。

这里是一个带有

useContext

钩子的例子，但钩子不是必须的。结构为标准

create-react-app

结构。

我们想要全局访问的组件 - src/deep/Header.js:

function Header() {
  return (
    <h1>
      I am a global component
    </h1>
  );
}

export default Header;

上下文创建 - src/global-components-context.js:

import React from 'react';

const MyContext = React.createContext(null);

export default MyContext;

全局组件的分组 - src/global-components.js:

import Header from './deep/Header';

const contextValue = {
  Header,
};

export default contextValue;

应用程序初始化文件 - src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import MyContext from './global-components-context';
import contextValue from './global-component';

ReactDOM.render(
  <MyContext.Provider value={contextValue}>
    <App />
  </MyContext.Provider>,
  document.getElementById('root')
);

使用组件而不导入它 - src/App.js:

import { useContext } from 'react';
import globalComponent from './global-components-context';

function App() {
  const Context = useContext(globalComponent);
  return (
    <div className="App">
      <Context.Header />
    </div>
  );
}

export default App;

我认为这是您可以在 React 中拥有的最全球化的组件。请注意，无论您想在何处使用全局组件，您仍然需要导入上下文。

还有一项免责声明，全局组件很难测试并且通常很难推理。我相信这就是为什么 React 中没有标准解决方案的原因。

希望我能帮忙

Answer 3

我想您可能希望看到一个与使用

Context

API 的全局组件类似的概念的实际示例。

虽然这个解决方案相当简单并且不依赖任何第三方模块，但它可能会导致不必要的重新渲染。出于这个原因和其他原因，您可能需要查看全局状态管理库，例如 Redux、MobX 或 Zusstand。

---

演示

使用两个 React Native 模态的工作示例：
^{（React Native 只是这里的一个示例；您可以轻松地为 React 重构它）}
https://snack.expo.dev/EEbnxTHfR

---

描述

“谈话很便宜。显示代码。”：

1。项目结构：

- src
  - components
    - global
      - GlobalComponent1.js
      - GlobalComponent2.js
      - index.js
  - contexts
    - GlobalComponentsContext.js
  - screens
    - HomeScreen.js
- App.js

2。基础知识：

import { createContext, useState } from 'react';

export const GlobalComponentsContext = createContext();

export const GlobalComponentsProvider = ({ children }) => {
  const globalState = {};

  [ globalState.value1, globalState.setValue1 ] = useState(false);
  [ globalState.value2, globalState.setValue2 ] = useState(false);

  return (
    <GlobalComponentsContext.Provider value={ globalState }>
      { children }
    </GlobalComponentsContext.Provider>
  );
};

3.全局组件示例：

import { GlobalComponentsContext } from '../../contexts/GlobalComponentsContext';

const GlobalComponent1 = () => {
  // accessing the global state; drop-in replacement for useState()
  const { value1, setValue1 } = useContext(GlobalComponentsContext);

  [...]
};

export default GlobalComponent1;

4。用

App

包裹

Context.Provider

：

import { GlobalComponentsProvider } from './src/contexts/GlobalComponentsContext';
import HomeScreen from './src/screens/HomeScreen';
import GlobalComponents from './src/components/global';

export default function App() {
  return (
    <GlobalComponentsProvider>
      <HomeScreen />
      <GlobalComponents />
    </GlobalComponentsProvider>
  )
}

5。全局组件的使用示例：

import { useContext } from 'react';
import { View, Text, Button } from 'react-native';
import { GlobalComponentsContext } from '../contexts/GlobalComponentsContext';

const HomeScreen = () => {
  // Take the state variables that you need:
  const { value1, setValue2 } = useContext(GlobalComponentsContext);

  return (
    <View>
      <Text>Value1: {value1}</Text>
      <Button title="setValue2" onPress={() => setValue2(true)} />
    </View>
  );
};

export default HomeScreen;