猿问

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

我正在渲染组件 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


白板的微信
浏览 133回答 2
2回答

临摹微笑

因此,在 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

慕少森

我认为您可以直接将这些样式用于这些元素,而不是从父 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
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答