Question

我不知道那是否存在。我正在尝试重用组件，但是，我试图重用的组件会收到道具，并且已经在组件内部对其进行了处理。

如果我在另一个地方重复使用此组件，则必须更改所有收到的道具。

在React中开发时这是常事还是我做错了什么？

Answer 1

我认为您应该将带有道具的组件分成两个部分：

组件A.功能（以及所需的所有道具）

组件B。一种没有支撑道具A的容器

希望这对您有帮助！

Answer 2

是很常见，通常可以通过 HoC（高阶组件）

解决

ref：https://reactjs.org/docs/higher-order-components.html

示例

function logProps(WrappedComponent) {
  return class extends React.Component {
    componentWillReceiveProps(nextProps) {
      console.log('Current props: ', this.props);
      console.log('Next props: ', nextProps);
    }
    render() {
      // Wraps the input component in a container, without mutating it. Good!
      return <WrappedComponent {...this.props} />;
    }
  }
}

const EnhancedComponent = logProps(WrappedComponent);

如何重用React组件而无需更改其内部道具？

2 个答案: