реакция js компонентный полиморфизм

Question

У меня есть несколько идентичных форм с функцией проверки. Я хочу создать другую форму с таким же поведением, кроме функции проверки.

Я пытаюсь использовать mixins для этого, но mixins не поддерживает переопределение метода.

Какой подход подходит для решения этой проблемы?

Это пример задачи: https://jsfiddle.net/69z2wepo/9150/

var FormMixin = { 
    validate: function() { 
     if (this.state.message !== '') { 
      this.setState({status: 'ok'}); 
     } else { 
      this.setState({status: 'error'}); 
     } 
    }, 
    getInitialState: function() { 
     return { 
      message: 'Hello123!', 
      status: '' 
     }; 
    }, 
    handleChange: function (newValue) { 
     this.setState({ 
      message: newValue 
     }); 
    }, 
    valueLink: function() { 
     return { 
      value: this.state.message, 
      requestChange: this.handleChange 
     }  
    }, 
    render: function() { 
     return (
     <div> 
      <input type = "text" valueLink = {this.valueLink()} /> 
      <button onClick={this.validate} >Validate</button> 
      <div>{this.state.status}</div> 
     </div> 
     ); 
    } 
} 

var Form = React.createClass({ 
    mixins: [FormMixin] 
}); 

var FormEmpty = React.createClass({ 
    /*validate: function() { // How to override validation 
     this.setState({status: 'ok'}); 
    },*/ 
    mixins: [FormMixin] 
}); 

var Hello = React.createClass({ 
    render: function() { 
     return (<div> 
      <Form /> 
      <Form /> 
      <Form /> 
      <FormEmpty /> 
     </div>); 
    } 
}); 

React.render(<Hello />, document.getElementById('container')); 

Answer 1

Вы можете создать подмешать фабрику, которая принимает функцию проверки в качестве параметра.

function FormMixin(validate) { 
    return { 
     validate: validate, 
     /* ... */ 
    }; 
} 

var Form = React.createClass({ 
    mixins: [FormMixin(validateMessage)] 
}); 

Обратите внимание, что миксины не могут переопределить render. Возможно, вам лучше создать простой компонент Form, который будет использовать опору validate и использовать ее в других компонентах.

Answer 2

Mixins может и не быть лучшим подходом, и они не подходят хорошо в подлинной модели JavaScript class, которая доступна в React 0.13+.

Один простой альтернативный подход заключается в использовании события/обратного вызова от Form к родительскому компоненту, который может предоставлять пользовательскую проверку (jsFiddle here). Например:

var Form = React.createClass({ 
    propTypes: { 
     validationOverride: React.PropTypes.func 
    }, 

    validate: function() { 
     if (this.props.validationOverride) { 
      this.setState({status: this.props.validationOverride() }); 
      return; 
     } 
     if (this.state.message !== '') { 
      this.setState({status: 'ok'}); 
     } else { 
     this.setState({status: 'error'}); 
     } 
    }, 
    getInitialState: function() { 
     return { 
      message: 'Hello123!', 
      status: '' 
     }; 
    }, 
    handleChange: function (newValue) { 
     this.setState({ 
      message: newValue 
     }); 
    }, 
    valueLink: function() { 
     return { 
      value: this.state.message, 
      requestChange: this.handleChange 
     }  
    }, 
    render: function() { 
     return (
     <div> 
      <input type = "text" valueLink = {this.valueLink()} /> 
      <button onClick={this.validate} >Validate</button> 
      <div>{this.state.status}</div> 
     </div> 
     ); 
    } 
}); 

var FormEmpty = React.createClass({ 
    validate: function() { 
     // you could pass in values to this function 
     return "NOT OK!"; 
    }, 
    render: function() { 
     return <Form validationOverride={ this.validate } />;  
    } 
}); 

В то время как я оставил некоторые особенности (как это было не ясно, как ваша проверка будет работать), вы можете увидеть, как я создал второй класс под названием FormEmpty, который содержит одиночный ребенок, Form. Он передает функцию в качестве обратного вызова с именем validationOverride. Form вызывает это (если установлено), когда проверка должна выполняться. Если он не установлен, применяется стандартная логика проверки.

Конечно, вы можете выбрать структурирование этого так, чтобы был базовый класс, который никогда не имеет валидации и что ему всегда необходимо передать функцию проверки. Таким образом, вам всегда нужно выполнить состав родителя и базовую форму для выполнения валидации (что было бы очень распространенным шаблоном React).

Answer 3

Пожалуйста, обратите внимание на

https://github.com/gcanti/tcomb-form

https://github.com/gcanti/tcomb-validation

Это очень удобно, если вы используете простую форму и проверки.