React 引入自己封装的组件不要加{}

### 如何在 React 中正确调用封装的自定义组件 在 React 应用开发中，调用已封装好的自定义组件是一项常见的任务。以下是关于如何正确调用封装好组件的最佳实践。 #### 1. 导入必要的依赖项 为了使用任何 React 自定义组件，首先需要将其导入到目标文件中。如果该组件是一个类组件，则通常会继承 `React.Component` 或者 `React.PureComponent` 并实现其生命周期方法和 `render()` 方法[^3]。对于函数式组件，可以直接导出并引入。 ```javascript // 假设有一个名为 MyCustomComponent 的封装组件位于同一目录下的 CustomComponent.js 文件中 import React from 'react'; import MyCustomComponent from './CustomComponent'; // 正确路径可能因项目结构而异 ``` #### 2. 使用 JSX 调用组件 一旦完成了组件的导入工作，在 JSX 语法里就可以像 HTML 标签一样来实例化这个组件了。需要注意的是首字母大写的命名约定——只有这样的名字才会被解析成一个 React 组件而不是普通的 DOM 元素[^4]。 ```jsx function App() { return ( <div> {/* 这里我们正在调用我们的自定义组件 */} <MyCustomComponent /> </div> ); } ``` #### 3. 参数传递 (Props) 当需要向子组件传参时，可以通过设置属性的方式完成这一过程。这遵循了一种单向数据流模式，即父级向下传递给子级的数据不可由后者自行修改。 ```jsx <MyCustomComponent propKey="value" anotherProp={someVariable} /> ``` #### 4. 处理回调事件 除了简单的值之外，还可以把函数作为 props 发送给子组件以便于它们能够通知父组件某些事情的发生，比如按钮点击之类的交互行为。 ```jsx handleClick = () => { /* 定义处理逻辑 */ }; <MyCustomComponent onClickHandler={this.handleClick} /> ``` #### 5. 高阶技巧：利用 Context 提供全局状态管理 如果存在多层嵌套的情况，并且希望减少手动层层透传 Props 的麻烦，那么可以考虑采用 React 的 Context 功能来进行跨层级的状态共享。 --- ### 示例代码展示 下面给出一段完整的例子演示上述知识点： ```javascript // 子组件 - CounterDisplay.js import React, { PureComponent } from 'react'; class CounterDisplay extends PureComponent { render() { const { count, incrementCount } = this.props; return ( <button onClick={incrementCount}> Current Count: {count} </button> ); } } export default CounterDisplay; // 父组件 - ParentComponent.js import React, { useState } from 'react'; import CounterDisplay from './CounterDisplay'; const ParentComponent = () => { const [counterState, setCounterState] = useState(0); function handleIncrement() { setCounterState(prevState => prevState + 1); } return ( <CounterDisplay count={counterState} incrementCount={handleIncrement} /> ); }; export default ParentComponent; ```