React 15의 valueLink 지원 중단 해결


React 버전 15는 더 이상 사용되지 않습니다. valueLink 이는 양식 요소의 값과 해당 요소를 사용하는 구성 요소의 상태 속성 간의 양방향 바인딩을 표현하기 위한 양식 요소의 속성입니다. 권장되는 대체 방법은 value 소품으로 공급하기 위해 onChange 대신 핸들러.
Rescale에서는 다음을 사용합니다. valueLink 많이. 비즈니스 객체를 수정하기 위한 구성 요소를 생성할 때 비즈니스 객체는 일반적으로 변경할 수 없습니다. Record 불변 라이브러리의 인스턴스 - 우리는 다음을 통해 비즈니스 객체를 구성 요소에 전달하는 패턴을 사용합니다. props, 그런 다음 다음을 통해 해당 객체에 대한 구성 요소의 상태 속성을 초기화합니다. getInitialState. 설명을 위한 의사코드는 다음과 같습니다.

// 불변 비즈니스 객체 const company = new Company({ 예산: '1000', 이름: 'Cool Company', }); // 회사 수정을 위한 UI // 컴포넌트 정의 const LinkedStateMixin = require('react-addons-linked-state-mixin'); const CompanySettings = React.createClass({ mixins: [ LinkedStateMixin, ], getInitialState() { 회사: this.props.company, showAdvancedOptions: false, }, handlerNameChange(name) { this.setState({ 회사: this.state.company .set('name', name); }); }, handlerBudgetChange(budget) { this.setState({ company: this.state.company.set('budget', Budget); }); }, save() { // 로직 저장 }, render() { return (
{this.state.showAdvancedOptions && }

); }, });
이 패턴의 좋은 점은 비즈니스 개체가 변경 불가능하기 때문에 회사가 구성 요소(this.props.company)는 본 컴포넌트 내에서 회사를 수정하는 과정에서 변경되지 않음을 보장하지만, 에서 참조하는 회사는 state (this.state.company) 변경될 수 있는 경우 handleNameChange 호출됩니다. 이 패턴을 사용하면 구성 요소의 상태가 모델 변경을 위한 "스테이징" 영역으로 간주될 수 있습니다. 우리는 참조한 회사를 비교하는 등의 작업을 수행할 수 있습니다. state 추천받은 회사와 props 변경 사항이 있는지 확인하고 변경 사항을 쉽게 되돌리거나 취소할 수 있습니다.
보시다시피, 양식에 의해 수정될 수 있는 모델의 모든 필드에 대한 핸들러를 생성하는 것은 약간 지루합니다. 이 예에서는 다음 내용을 변경하기 위한 핸들러가 필요했습니다. name 그리고 다음과 같이 변경됩니다. budget. 하지만 적절한 객체를 생성하는 함수를 만드는 것은 그리 어렵지 않습니다. { requestChange, value } 페어링한 다음 해당 개체를 피드에 공급합니다. valueLink. 사실 그게 그렇죠 반응 애드온 연결 상태 믹스인반응링크 불변 사용됩니다.
그러나 React 15에서는 다음을 사용합니다. valueonChange 대신 valueLink. 사용으로 전환 value 그렇게 큰 문제는 아니므로 위의 예와 같이 작성하면 됩니다. 유일한 주의사항은 체크박스를 사용해야 한다는 것입니다. checked 대신 value.
핸들러를 생성하는 팩토리 만들기 onChange 간단한 구성 요소 상태(간단한 문자열 또는 부울 값이 있는 상태)와 불변 객체를 참조하는 상태를 혼합하여 사용하기 때문에 우리가 직접 구현하기로 결정한 것입니다. 여기에 생성을 위한 공장이 있습니다. onChange 핸들러(이름이 linkState, 와 혼동하지 말 것 this.linkState React-addons-linked-state-mixin에 의해 제공됨):

function createHandler(컴포넌트, 키, 경로) { return e => { const el = e.target; const value = el.type === '체크박스' ? el.checked : el.value; 구성 요소.setState({ [키]: 경로 ? 구성 요소.상태[키].setIn(경로, 값) : 값, }); }; } module.exports = function linkState(컴포넌트, 키, 경로) { if (경로) { return createHandler(컴포넌트, 키, 경로); } const 캐시 = component.__linkStateHandlers || (컴포넌트.__linkStateHandlers = {}); 캐시[키] 반환 || (cache[key] = createHandler(컴포넌트, 키)); };

우리는 이것을 사용하여 valueLink위의 예에서는 다음과 같습니다.

const CompanySettings = React.createClass({ getInitialState() { company: this.props.company, showAdvancedOptions: false, }, save() { // 저장 처리 }, render() { return (
{this.state.showAdvancedOptions && }

); }, });
우리 구현의 좋은 점은 미래에 더 이상 사용되지 않을 믹스인을 사용할 필요가 없으며, 간단한 상태를 처리하는 핸들러를 생성하고 불변 객체의 심층 수정을 위해 동일한 팩토리 함수를 사용하고 있다는 것입니다. 이는 프로젝트에서 React-addons-linked-state-mixin 및 Reactlink-immutable 종속성을 제거할 수 있음을 의미합니다.

비슷한 게시물