簡単でフレキシブルなReactフォーマットとi 18 nツールです.

2192 ワード

es 6 javascript i 18 n react.js

react-putはシンプルで使いやすいフォーマットとi 18 nツールです.
これは、「接続」コンポーネントを介して、デフォルトではputのpropsにコンポーネントを与える.putは、異なるkeyに従って異なるコンテンツを表示することができる関数である.keyとコンテンツとの関係は、構成によって柔軟に決定することができる.
NPM GitHubオンラインインタラクティブデモンストレーション
一番簡単な使い方:

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

【転載】HTMLページからジャンプする5つの方法