面试题：React父子组件间Props传递的常见问题及解决

常见问题及举例

Props传递层级过深（“prop drilling”）
- 举例：假设有一个多层嵌套的组件结构，A组件是最外层组件，C组件是A组件的孙组件。A组件需要将某个数据传递给C组件，但中间还隔着B组件。A组件将数据通过props传递给B组件，B组件再将其传递给C组件。
```
function A() {
  const data = 'important data';
  return <B data={data} />;
}
function B({ data }) {
  return <C data={data} />;
}
function C({ data }) {
  return <div>{data}</div>;
}
```
- 问题：这种传递方式使得中间层组件（如B组件）变得复杂，它需要传递自己并不使用的数据，增加了组件的维护成本，并且如果数据传递链很长，修改数据传递路径会很麻烦。
Props类型错误
- 举例：假设一个组件期望接收一个数字类型的props，但传递了一个字符串。
```
function MyComponent({ value }) {
  return <div>{value + 1}</div>;
}
// 使用组件时传递了错误类型
<MyComponent value="1" />
```
- 问题：这会导致运行时错误，例如在上述代码中，字符串和数字相加会导致NaN的结果，影响组件的正常功能。
Props不变性问题
- 举例：在子组件中尝试直接修改props。
```
function Child({ data }) {
  data.push('new item');// 尝试修改props
  return <div>{data.join(', ')}</div>;
}
function Parent() {
  const initialData = ['item1', 'item2'];
  return <Child data={initialData} />;
}
```
- 问题：React的props是单向数据流且不可变的，直接修改props违反了React的设计原则，会导致数据不一致和难以调试的问题。

解决方法

解决Props传递层级过深
- 使用Context：React的Context API可以让组件共享数据，而无需通过中间组件层层传递。
```
const MyContext = React.createContext();
function A() {
  const data = 'important data';
  return (
    <MyContext.Provider value={data}>
      <C />
    </MyContext.Provider>
  );
}
function C() {
  const data = React.useContext(MyContext);
  return <div>{data}</div>;
}
```
- 使用状态管理库（如Redux或MobX）：这些库可以集中管理应用的状态，组件可以直接从状态管理库中获取所需的数据，避免props层层传递。例如使用Redux，组件可以通过connect（在旧版本中）或useSelector（在React - Redux v7.1+中）从Redux store获取数据。

解决Props类型错误

使用TypeScript：为组件的props定义类型。例如：

interface MyComponentProps {
  value: number;
}
function MyComponent({ value }: MyComponentProps) {
  return <div>{value + 1}</div>;
}

使用PropTypes（在JavaScript项目中）：虽然现在TypeScript更流行，但PropTypes可以在纯JavaScript项目中验证props类型。

import PropTypes from 'prop-types';
function MyComponent({ value }) {
  return <div>{value + 1}</div>;
}
MyComponent.propTypes = {
  value: PropTypes.number.isRequired
};

解决Props不变性问题

在父组件中更新数据：如果需要修改数据，在父组件中创建修改数据的函数，并将该函数作为props传递给子组件。子组件通过调用该函数来通知父组件修改数据。

function Child({ data, updateData }) {
  const handleClick = () => {
    updateData([...data, 'new item']);
  };
  return (
    <div>
      {data.join(', ')}
      <button onClick={handleClick}>Add item</button>
    </div>
  );
}
function Parent() {
  const [data, setData] = React.useState(['item1', 'item2']);
  const updateData = newData => {
    setData(newData);
  };
  return <Child data={data} updateData={updateData} />;
}

星途面试题库

面试题：React父子组件间Props传递的常见问题及解决

知识考点

面试题答案

常见问题及举例

解决方法