从另一个属性访问元素自己的属性

Question

我有一个类似的输入标签

export default function MyComponent(prop) {
const [searchParams, setSearchParams]= useSearchParams();
return (
<input 
className="css-checkbox" 
type="checkbox" 
id="cupcakes" 
name="filterCupcakes" 
checked={searchParams.has("filterCupcakes")}
/>
);
}

有没有一种方法可以从checked属性中访问name属性？类似这样的东西：

<input 
className="css-checkbox" 
type="checkbox" 
id="cupcakes" 
name="filterCupcakes" 
checked={searchParams.has(input.name)}
/>

(顺便说一句，如果你对更好的问题名称有任何建议，请评论(

Answer 1

预先声明名称，然后在两个道具中引用该名称。

export default function MyComponent() {
const [searchParams, setSearchParams]= useSearchParams();
const name = 'filterCupcakes';
return (
<input 
className="css-checkbox" 
type="checkbox" 
id="cupcakes" 
name={name}
checked={searchParams.has(name)}
/>
);
}

对于返回另一个静态输入的单个组件来说，这并没有多大意义，但通过在MyComponent中添加一个指示输入名称的prop，可以很容易地扩展上述内容。

export default function MyComponent({ name }) {
const [searchParams, setSearchParams]= useSearchParams();
return (
<input 
className="css-checkbox" 
type="checkbox" 
id="cupcakes" 
name={name}
checked={searchParams.has(name)}
/>
);
}

<MyComponent name="filterCupcakes" />