资本化独立反应道具

Question

我想给用户一个道具独立于大写的界面。例如：

<MyComponent prop1="value1" Prop2="value2" />
<MyComponent ProP1="value1" prop2="value2" />

两者都应该是有效的，并且以相同的方式工作。虽然我想避免修改原始道具，因为道具可能包含大量数据，但我也计划避免克隆它们。有什么好方法可以让我做到这一点吗？

Answer 1

我不建议这么做，但这不是你的问题。您的问题是您是否可以。：-D是的，你可以，通过使用默认值进行析构函数。例如：

const MyComponent = ({Prop1, prop1 = Prop1, Prop2, prop2 = Prop2}) => {
// Use `prop1` and `prop2` here
};

或作为函数声明：

function MyComponent({Prop1, prop1 = Prop1, Prop2, prop2 = Prop2}) {
// Use `prop1` and `prop2` here
}

或者在类组件的CCD_ 1中：

render() {
const {Prop1, prop1 = Prop1, Prop2, prop2 = Prop2} = this.props;
// Use `prop1` and `prop2` here
}

破坏{Prop1, prop1 = Prop1, Prop2, prop2 = Prop2}的参数说：

• 提取Prop1(如果未提供，则为undefined(
• 提取prop1(如果未提供，则为undefined(，如果未提供/为undefined，则默认为Prop1的值
• (与Prop2/render0相同(

这里有一个例子(只是使用一个普通函数，因为这是关于析构函数的(：

function example({Prop1, prop1 = Prop1, Prop2, prop2 = Prop2}) {
console.log(`prop1 = "${prop1}"`);
console.log(`prop2 = "${prop2}"`);
}
example({Prop1: "a1", prop2: "b1"});
example({prop1: "a2", Prop2: "b2"});

---

(众所周知，我使用它来解决class与className的愚蠢问题：{"class": cls, className = cls}然后在代码中使用className。(

---

或者，由于道具是一个对象，您可以将所有道具名称转换为小写：

const {prop1, prop2} = Object.fromEntries(
Object.entries(props).map(([name, value]) => [name.toLowerCase(), value])
);

Answer 2

试试这样的东西：

const inpProps = {};
Object.keys(props).forEach((key) => {
inpProps[key.toLowerCase()]= props[key];
});