Question

我们使用react-intl显示货币，例如：

<FormattedNumber value={132.4} style="currency" currency="GBP" />

我正在调整我们的系统，以便每个用户都可以配置他们的货币。当用户登录时，我们将从我们的API中提取活跃货币，例如“GBP”。然后，我可以连接每个组件以从商店中提取活动货币：

@connect((store) => {
    return {
        activeCurrency: store.user.preferences.currency
    }
})
export default class ExamplePage extends React.Component {

    render() {  
        return (
                <div class="row">
                    <FormattedNumber value={132.4} style="currency" currency={this.props.activeCurrency} />   
                </div>
            )
    }
}

这种方法很好用。但是，我将在整个应用程序中的所有activeCurrency函数中设置@connect属性。有没有更简洁的方法来连接某种全局变量，我可以在React层次结构中的任何地方调用它来避免这种重复？

Answer 1

将逻辑拉入自己的可重用函数：

// withCurrency.js: 
const withCurrency = connect((store) => {
    return {
        activeCurrency: store.user.preferences.currency
    }
});

export default withCurrency;

// ExamplePage.js
import withCurrency from './withCurrency.js';

@withCurrency
class ExamplePage extends React.Component {
    // ...
}

export default ExamplePage;

为用户首选项连接全局变量

1 个答案: