DRY jsx渲染方法

我不知道是否更好的方法來幹這個代碼，你們有什麼想法嗎？的道具是一樣的，只是成分變化...DRY jsx渲染方法

render() { 
    const { input: { value, onChange }, callback, async, ...rest } = this.props; 

    if (async) { 
     return (
     <Select.Async 
      onChange={(val) => { 
      onChange(val); 
      callback(val); 
      }} 
      value={value} 
      {...rest} 
     /> 
    ); 
    } 

    return (
     <Select 
     onChange={(val) => { 
      onChange(val); 
      callback(val); 
     }} 
     value={value} 
     {...rest} 
     /> 
    ); 
    }

來源

2017-01-04 Patrick Ferreira

如果代碼正在工作，並且您想要改進它，請將其發佈到[codereview.se]。在你做之前，請看看[我如何提出一個好問題？]（http://codereview.stackexchange.com/help/how-to-ask） – Tushar

[React/JSX Dynamic Component Name] （http://stackoverflow.com/questions/29875869/react-jsx-dynamic-component-name） – Whymarrh

@Tushar謝謝，我會記得下一次。 –

有了：

let createElement = function(Component) { 
    return (
     <Component onChange={(val) => { 
      onChange(val); 
      callback(val); 
      }} 
      value={value} 
     {...rest} 
     /> 
    ); 
};

你可以做

let selectAsync = createElement(Select.Async); 
let select = createElement(Select);

您可以用{{select}} and {{selectAsync}}的JSX部分使其

PS：我沒有直接測試這個，但做了一些非常相似的事情幾天前，所以這種方法應該工作。請注意，組件必須以大寫字母開頭。

來源

2017-01-04 14:12:25 Minato

DRY jsx渲染方法

回答

相關問題