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>

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

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

自动映射React组件的道具

1 个答案: