一個(gè)簡(jiǎn)單且靈活易用的 React 格式化和 i18n 工具

20171112 發(fā)布于2019-08-20 13:55 / 1396人閱讀

摘要：是一個(gè)簡(jiǎn)單且靈活易用的格式化和工具。它通過(guò)連接組件給組件一個(gè)默認(rèn)為的。是一個(gè)可以根據(jù)不同的顯示不同內(nèi)容的函數(shù)。和內(nèi)容之間的關(guān)系可以靈活地通過(guò)配置確定。在線互動(dòng)演示最簡(jiǎn)單的使用方式你好歡迎你好歡迎也可與相連

react-put 是一個(gè)簡(jiǎn)單且靈活易用的格式化和 i18n 工具。

它通過(guò)“連接”組件給組件一個(gè)默認(rèn)為 put 的 props。put 是一個(gè)可以根據(jù)不同的 key 顯示不同內(nèi)容的函數(shù)。 key 和內(nèi)容之間的關(guān)系可以靈活地通過(guò)配置確定。

NPM
GitHub
在線互動(dòng)演示

最簡(jiǎn)單的使用方式：

// App.js 
import connectPut from "react-put"
 
class App extends Component {
  render() {
    return (
      
        {this.props.put("hello")}, {this.props.put("welcome", "username")}
        {this.props.put("haveApple", "username", 3)}
        {this.props.put("testKey")}
      
    );
  }
}
const options = {
  dictionary: {
    hello: "你好",
    welcome: name => `歡迎${name}`,
    haveApple: (name, amount) => `${name} has ${amount} ${amount === 1 ? "apple" : "apples"}`,
  },
  mapPropToDictionary: props => props, // You can do something wild with this option 
};
export default connectPut(options)(App);
 
// test.js 
import App from "./App";
 
...
  render() {
    return 
  }
...
 
// renders: 

  你好, 歡迎username
  username has 3 apples
  someValue

也可與 redux 相連

class App extends Component {
  constructor(props) {
    super(props);
    this.changeLanguage = () => {
      this.props.dispatch({ type: "SET_DICT", dictionary: {...} }); // Assume SET_DICT is received by dictionary reducer 
    };
  }
  render() {
    return (
      
        {this.props.put("hello")}, {this.props.put("welcome", "username")}
        {this.props.put("haveApple", "username", 3)}
        {this.props.put("testKey")}
        
      
    );
  }
}
const options = {
  mapPropToDictionary: props => Object.assign({}, props.dictionary),
};
const mapStateToProps = state => Object.assign({}, { dictionary: state.dictionary });
ConnectedApp = connectPut(options)(App);
ConnectedApp = connect(mapStateToProps)(ConnectedApp);