Javascript 自动映射React组件的道具

想象一个组件：

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

是否可以在不从父级调用的情况下，在组件中自动且仅应用一次方法

transform

---

例如，如果我称之为

<MyComponent x={1}/>

他展示

<div>value: 2</div>

值：2

但我不想写

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

render=（）=>值：{transform（this.props.x）}

---

因为这意味着每次我访问

x

时都必须调用

transform

，好的，我自己找到了一种方法

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

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

export default mapProps(MyComponent);

类MyComponent扩展组件{
render=（）=>值：{this.props.x}
}
常量mapProps=组件=>props=>
导出默认mapProps（MyComponent）；

为什么不在组件的构造函数中调用props上的方法呢？这种类型的转换不需要更高阶的组件。这可能有几个原因。在我的例子中，在父对象和子对象之间有一个通用包装器，用于等待一种输入。更一般地说，它可以简化组件API。但这不就是改变构造函数中的道具吗？你正在创建一个更高阶的组件，在渲染之前转换道具，这是一样的。好吧，我想你是说在父级中。如果我没弄错的话，道具是不可变的。你是对的。我的错，我的意思是根据你的道具在构造函数中分配一个新的var，就像你用高阶组件创建一个新的道具

x

。

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

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

export default mapProps(MyComponent);