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

Вы можете сделать их в JSX части с {{select}} and {{selectAsync}}

PS: Я не тестировал это прямо, но сделал что-то очень похожее несколько дней назад, поэтому такой подход должен работать. Обратите внимание, что компонент должен начинаться с заглавной буквы.

источник

2017-01-04 14:12:25 Minato

DRY метод рендеринга jsx

ответ

Смежные вопросы