代码之家 › 专栏 › 技术社区 › Stan Hurks

反应全局组件

create-react-app components reactjs javascript

Stan Hurks · 技术社区 · 6 年前

我来自一个vue.js背景,我最近才开始研究react。

我有一个组件:pagecontent.jsx,我希望使用它,而不必经常导入它,就可以在render函数(jsx)中使用它。

在Vue中,可以使用以下方法实现组件的全球化:

Vue.component(componentName, componentObject)

有什么相似的反应吗?

1 回复 | 直到 6 年前

Chase DeAnda 6 年前

嗯,react中没有任何“全局”组件。每个组件都必须作为道具导入或传递。如果要避免向每个文件添加导入,可以使用以下几个选项:

1)创建 Higher Order Component 使 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)通过 页面内容 作为组件的支柱:

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>
    )
  }
}

推荐文章