因此，在 React 中，如果你傳遞同名的 props，它只會(huì)選擇最后傳遞的那個(gè)。因此，使用您的兩個(gè)樣式道具，它只會(huì)通過最后一個(gè)。然而，無論如何使用名稱樣式可能都不是最好的主意，因?yàn)樗皇敲枋鲂缘?，而且還反映了實(shí)際的 HTML 樣式屬性。
在 App.js 文件中為兩種不同的樣式指定唯一的名稱：
<div className="App">
<Dropdown
inputName="viola"
list={[
{ yard_id: "1", yard_name: "Yard 1" },
{ yard_id: "2", yard_name: "Yard 2" }
]}
// this style is for className="select-box-current"
currentStyles={{ border: "1px solid #D4D4D4" }}
// this style is for className="select-box-list"
listStyles={{
opacity: 1,
display: "inherit",
animationName: "none",
cursor: "pointer"
}}
/>
</div>
現(xiàn)在我們需要通過組件樹傳遞這兩個(gè)屬性，下一個(gè)文件是 Dropdown.js 文件。
在我開始傳遞道具之前，我想對(duì)一些錯(cuò)誤的、不完全相關(guān)的事情發(fā)表評(píng)論。
export const Dropdown = ({ list, ...others }) => {
const copiedProps = {};
Object.keys(others).forEach((key) => {
// these are the props that need to get thru:
if ("style" === key || "className" === key) {
copiedProps[key] = others[key];
}
});
...
復(fù)制道具是沒有必要的，而且復(fù)制的方式實(shí)際上是有害的。如果您想專門針對(duì)傳入 props 中的某個(gè)值，您可以直接訪問它（例如props.myProp或在本例中other.style）或解構(gòu)賦值。
由于您只想傳遞樣式（現(xiàn)在為 listStyles 和 currentStyles）和 className，因此我選擇使用解構(gòu)賦值將它們分配給變量。
export const Dropdown = ({
list,
currentStyles,
listStyles,
className,
...others
}) => { ... }
現(xiàn)在我們有了這些道具，我們希望將其傳遞到包含DropdownView您想要定位的實(shí)際元素的您的道具中。
<DropdownView
dropdownItems={dropdownItems}
activeItem={activeItem}
hover={hover}
setActiveItem={(activeItem) => {
setActiveItem(activeItem);
}}
onMouseOver={(hover) => onMouseOver(hover)}
toggleList={() => toggleList(!hideList)}
hideList={hideList}
className={className}
currentStyles={currentStyles}
listStyles={listStyles}
/>
好的，現(xiàn)在我們有了我們想要的樣式和類名。您所要做的就是像上面那樣獲取道具，然后將它們?cè)O(shè)置在元素上。
<div
className="select-box-current"
tabIndex="0"
autoFocus={true}
onClick={() => toggleList()}
style={currentStyles}
>...</div>
我分叉了沙箱以包含一個(gè)工作示例。但是我沒有在 中設(shè)置使用 className 屬性的節(jié)點(diǎn)，DropdowView因?yàn)椴磺宄膫€(gè)元素將具有該屬性。
https://codesandbox.io/s/hardcore-sun-yyx0g?file=/src/DropdownView.jsx
