将样式属性传播到 React 子级并将它们应用到 CSS 文件

Question

我正在渲染组件 Dropdown，它的作用类似于 html 下拉组件，但它是 div 有序和无序列表的集合。我试图将样式传递给 className elements ，其中有 dropdown.css 文件渲染样式，但我不确定如何从父组件一直定位这些特定元素。如何瞄准

div 类名=“选择框当前”

和style={{ border: "1px solid #D4D4D4" }}

和

div className="选择框列表"

和

style={{

          opacity: 1,

          display: "inherit",

          animationName: "none",

          cursor: "pointer"

        }}

CodeSandblox 在这里 -> https://codesandbox.io/s/weathered-wood-cf8u8?file=/src/App.js:481-614

Answer 1

因此，在 React 中，如果你传递同名的 props，它只会选择最后传递的那个。因此，使用您的两个样式道具，它只会通过最后一个。然而，无论如何使用名称样式可能都不是最好的主意，因为它不是描述性的，而且还反映了实际的 HTML 样式属性。在 App.js 文件中为两种不同的样式指定唯一的名称：<div className="App">&nbsp; <Dropdown&nbsp; &nbsp; inputName="viola"&nbsp; &nbsp; list={[&nbsp; &nbsp; &nbsp; { yard_id: "1", yard_name: "Yard 1" },&nbsp; &nbsp; &nbsp; { yard_id: "2", yard_name: "Yard 2" }&nbsp; &nbsp; ]}&nbsp; &nbsp; // this style is for&nbsp; className="select-box-current"&nbsp; &nbsp; currentStyles={{ border: "1px solid #D4D4D4" }}&nbsp; &nbsp; // this style is for className="select-box-list"&nbsp; &nbsp; listStyles={{&nbsp; &nbsp; &nbsp; opacity: 1,&nbsp; &nbsp; &nbsp; display: "inherit",&nbsp; &nbsp; &nbsp; animationName: "none",&nbsp; &nbsp; &nbsp; cursor: "pointer"&nbsp; &nbsp; }}&nbsp; /></div>现在我们需要通过组件树传递这两个属性，下一个文件是 Dropdown.js 文件。在我开始传递道具之前，我想对一些错误的、不完全相关的事情发表评论。export const Dropdown = ({ list, ...others }) => {&nbsp; const copiedProps = {};&nbsp; Object.keys(others).forEach((key) => {&nbsp; &nbsp; // these are the props that need to get thru:&nbsp; &nbsp; if ("style" === key || "className" === key) {&nbsp; &nbsp; &nbsp; copiedProps[key] = others[key];&nbsp; &nbsp; }&nbsp; });&nbsp; ...复制道具是没有必要的，而且复制的方式实际上是有害的。如果您想专门针对传入 props 中的某个值，您可以直接访问它（例如props.myProp或在本例中other.style）或解构赋值。由于您只想传递样式（现在为 listStyles 和 currentStyles）和 className，因此我选择使用解构赋值将它们分配给变量。export const Dropdown = ({&nbsp; list,&nbsp; currentStyles,&nbsp; listStyles,&nbsp; className,&nbsp; ...others}) => { ... }现在我们有了这些道具，我们希望将其传递到包含DropdownView您想要定位的实际元素的您的道具中。<DropdownView&nbsp; dropdownItems={dropdownItems}&nbsp; activeItem={activeItem}&nbsp; hover={hover}&nbsp; setActiveItem={(activeItem) => {&nbsp; &nbsp; setActiveItem(activeItem);&nbsp; }}&nbsp; onMouseOver={(hover) => onMouseOver(hover)}&nbsp; toggleList={() => toggleList(!hideList)}&nbsp; hideList={hideList}&nbsp; className={className}&nbsp; currentStyles={currentStyles}&nbsp; listStyles={listStyles}/>好的，现在我们有了我们想要的样式和类名。您所要做的就是像上面那样获取道具，然后将它们设置在元素上。<div&nbsp; className="select-box-current"&nbsp; tabIndex="0"&nbsp; autoFocus={true}&nbsp; onClick={() => toggleList()}&nbsp; style={currentStyles}>...</div>我分叉了沙箱以包含一个工作示例。但是我没有在 中设置使用 className 属性的节点，DropdowView因为不清楚哪个元素将具有该属性。https://codesandbox.io/s/hardcore-sun-yyx0g?file=/src/DropdownView.jsx

Answer 2

我认为您可以直接将这些样式用于这些元素，而不是从父 div 中使用它们，如下所示。https://codesandbox.io/s/eloquent-lamport-3spzr?file=/src/App.js但是如果你想使用父级的那些样式。然后您可以使用特定名称传递它们。像这样<Dropdown&nbsp; &nbsp; inputName="viola"&nbsp; &nbsp; list={[&nbsp; &nbsp; &nbsp; &nbsp; { yard_id: "1", yard_name: "Yard 1" },&nbsp; &nbsp; &nbsp; &nbsp; { yard_id: "2", yard_name: "Yard 2" }&nbsp; &nbsp; ]}&nbsp; &nbsp; // this style is for&nbsp; className="select-box-current"&nbsp; &nbsp; selectBoxCurrentStyle={{ border: "1px solid #D4D4D4" }}&nbsp; &nbsp; // this style is for className="select-box-list"&nbsp; &nbsp; selectBoxListStyle={{&nbsp; &nbsp; &nbsp; &nbsp; opacity: 1,&nbsp; &nbsp; &nbsp; &nbsp; display: "inherit",&nbsp; &nbsp; &nbsp; &nbsp; animationName: "none",&nbsp; &nbsp; &nbsp; &nbsp; cursor: "pointer"&nbsp; &nbsp; }}/>这是链接https://codesandbox.io/s/damp-rain-cyhxb?file=/src/App.js:133-643