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

Question

I don't know if that even exists. I am trying to reuse a component, however, the component I am trying to reuse receive props and already handles them inside of the component.

If I reuse this component in another place I am going to have to change all of the props received.

Is that a common thing when developing in React or I am doing something wrong?

Answer 1

I think you should divide the component with the props to two:

Component A. functionality (and all the props needed)

Component B. a type of container with no props just holding the component A

Hope this helps you!

Answer 2

Yes is common and is often resolved with HoC (High Order Components)

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

Example

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