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
}

或在类组件的render中：

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），如果未提供，则默认为Prop1的值，或者为undefined
（与Prop2 / prop2相同）

这是一个示例（只使用简单的函数，因为这是关于解构的）：

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。）

或者，因为props是一个对象，所以您可以将所有prop名称都转换为小写：

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];
});

大写独立的反应道具

2 个答案: