javascript - 自动映射 React 组件的 Prop

Question

想象一个组件:

class MyComponent extends Component {
    render = () => <div>value: {this.props.x}</div>        
}

和一个方法:

const transform = x => x + 1;

是否可以在组件中自动应用transform方法，并且只在组件中应用一次，而无需从父级调用它？

---

例如，如果我称它为

<MyComponent x={1}/>

他展示

<div>value: 2</div>

可是我不想写

render = () => <div>value: {transform(this.props.x)}</div>

因为这意味着我每次访问 x 时都必须调用 transform。

Answer 1

好吧，我自己找到了一个方法!

class MyComponent extends Component {
    render = () => <div>value: {this.props.x}</div>        
}

const mapProps = Component => props => <Component x={transform(props.x)}/>

export default mapProps(MyComponent);