问题

Question

我正在开发一个项目，我必须将一些实用程序函数附加到Javascript Object对象，如下所示：

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

现在我面临的问题是，因为我正在使用react，我猜测上面的代码也将isEmpty函数附加到构造的组件。只要我不在我的组件中使用原始html标记即div，span这是不可能的，这样就可以正常工作。我收到以下警告

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

当我使用原生html标签时。有没有办法增加Object对象而不会在反应中出现此错误？

Answer 1

当您在反应中编写Option Explicit Public objhttp As New XMLHTTP Public url1 As String Public src As String '*******regualr Expression Variables******* Public regx As New RegExp, matches As Object, match As Object标记时，它会被转换为对象（React元素）。

所以

jsx

转换为以下<div id="test"> </div> -

object

现在你正在附上

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

它会附加到每个存在的对象上。

可能您应该考虑提供一个function sum(a, b) {...} Object.prototype.sum = sum;，它将包含所有实用程序方法，并且不会附加到Object原型。因为它会导致不良副作用。

您可以根据需要导入Util.js并使用这些方法。

e.g。 -

Util.js

Answer 2

问题是像这样的对象扩展是可枚举的。您需要使用defineProperty

BTW：这仍然是一个坏主意

Answer 3

问题

所有JSX元素首先被创建为对象（WitVault解释了如何将JSX转换为可以在浏览器中运行的普通JS）。 React获取React支持的那些对象及其属性，并将它们映射到DOM元素。如果有React不知道的属性，它会显示警告，因为它可能是“你不知道你在做什么”或“你弄错了”的情况，因此你不会得到你期望的行为。

由于您编辑了Object的原型，所有对象（也是由React创建的对象）都获取属性sum，而对于原始html元素，React不知道如何映射sum属性。 / p>

胡安门德斯指出，extending native objects is bad practice。如果你在React项目中扩展Object.prototype，你真的无法避免遇到的问题。

解决方案1：导出/导入util函数

由于React附带了browserify，您可以改为导入实用程序方法。这有两个好处：

您不需要扩展本机对象
您清楚地表达了所使用方法的来源，因为它们在使用它的文件中有一个import语句。

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

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

解决方案2：使用ES6类

在ES6中，您还可以使用sum方法创建一个类。这是一个例子：

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

在React中扩充对象

3 个答案:

问题

解决方案1：导出/导入util函数

解决方案2：使用ES6类