를 증대 오브젝트 나는 다음과 같은 자바 스크립트 <code>Object</code> 객체에 대한 몇 가지 유틸리티 기능을 첨부해야 내가 프로젝트를 진행하고

Question

반응에 : 나는 반응 함께 일하고 있기 때문에

function isEmpty(a, b) {...} 
Object.prototype.isEmpty = isEmpty; 

지금 직면하고있는 문제는, , 나는 위의 코드를 짐작하고있다 또한 구성된 구성 요소에 isEmpty 함수를 첨부합니다. 기본 HTML 태그 (예 : div, span)를 사용할 수없는 한 정상적으로 작동합니다. 나는 기본 HTML 태그를 사용할 때 다음과 같은 경고

Warning: Unknown prop `isEmpty` on <div> tag. 
Remove these props from the element. For details, see 
https://facebook.github.io/react/warnings/unknown-prop.html 

를 얻을. 반응에서이 오류가 발생하지 않고 Object 객체를 늘릴 수있는 방법이 있습니까?

Answer 1

문제는이 개체 확장자를 열거 할 수 있다는 것입니다. 당신은 BTW defineProperty

를 사용해야합니다 :이 여전히

Answer 2

jsx 태그를 반응식으로 작성하면 객체 (반응 요소)로 전환됩니다. 당신이

function sum(a, b) {...} 
Object.prototype.sum = sum; 

그것은 존재하는 모든 물체에 부착됩니다 부착되어 있기 때문에 지금

var divElement = React.createElement("div", { id: "test" }); 

-

그래서

<div id="test"> 
</div> 

는 object를 다음으로 변환된다.

Util.js을 제공하는 것이 좋습니다. 모든 유틸리티 메소드가 포함되어 있으며 Object 프로토 타입에 첨부하지 마십시오. 원하지 않는 부작용을 일으킬 수 있기 때문입니다.

Util.js을 가져올 수 있으며 원하는 경우 해당 방법을 사용할 수 있습니다.

-

module.exports = { 
    sum(a, b) {...} 
}; 

Answer 3

문제

모든 JSX 요소는 첫 번째 (WitVault는 JSX가 브라우저에서 실행할 수있는 일반 JS에 transpiled하는 방법을 설명합니다) 객체로 만들어집니다. React는 React가 지원하는 객체와 속성을 사용하여 DOM 요소에 매핑합니다. React가 알지 못하는 속성이 있다면 "당신이하고있는 일을 알지 못한다"또는 "오타를 만들었습니다"중 하나 일 가능성이 높으므로 경고를 표시합니다. 따라서 당신은 당신이 기대하는 행동.

당신은 객체, 모든 오브젝트하는 sum 속성을 매핑하는 방법을 모르는 반작용도 재산 sum를 얻을 반작용에 의해 생성하는, 그리고 원시 HTML 요소의 프로토 타입을 편집 때문에.

Juan Mendes이 지적한대로 extending native objects is bad practice. React 프로젝트에서 Object.prototype을 확장하면 실제로 발생하는 문제를 피할 수 없습니다.

해결 방법 1 : 내보내기/가져 오기 폴더의 유틸리티 기능

이후 반응은 대신 유틸리티 메소드를 가져올 수 있습니다 browserify와 함께 제공됩니다.

• 당신은 네이티브 오브젝트
• 당신은 분명히 방법들이이 사용되는 파일의 가져 오기 문이 원인에서 온 사용 된 위치 표현을 확장 할 필요가 없습니다 :이 두 가지 이점이있다. ES5

  // util/objectSum.js 
  module.exports = function(object) { ... }; 
  
  // anotherFile.js 
  var objectSum = require('utils/objectSum.js'); // assuming utils/ is directly under the root path of your project (root path can be configured in webpack.config if you use webpack) 
  
  const object = ?; // the object you want to sum 
  const sum = objectSum(object); 
  

  에서 ES6

  // util/objectSum.js 
  export default function objectSum(object) { ... }; 
  
  // anotherFile.js 
  import objectSum from 'utils/objectSum.js'; // assuming utils/ is directly under the root path of your project (root path can be configured in webpack.config if you use webpack) 
  
  const object = ?; // the object you want to sum 
  const sum = objectSum(object); 
  

  에서

해결 방법 2 : 또한 합계 방법으로 클래스를 만들 수 있습니다 ES6에서 사용 ES6 클래스

. 예를 들면 다음과 같습니다.

class NumberList { 
    constructor(arrayOfNumbers) { 
     this.numbers = arrayOfNumbers; 
     this.sum = this.sum.bind(this); 
    } 

    sum() { 
     return this.numbers.reduce((sum, next) => sum + next, 0); 
    } 
} 

const numberList = new NumberList([1, 2, 3]); 
numberList.sum(); // -> 6