将样式属性传播到 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">

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

现在我们需要通过组件树传递这两个属性，下一个文件是 Dropdown.js 文件。

在我开始传递道具之前，我想对一些错误的、不完全相关的事情发表评论。

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

    }

  });

  ...

复制道具是没有必要的，而且复制的方式实际上是有害的。如果您想专门针对传入 props 中的某个值，您可以直接访问它（例如props.myProp或在本例中other.style）或解构赋值。

由于您只想传递样式（现在为 listStyles 和 currentStyles）和 className，因此我选择使用解构赋值将它们分配给变量。

export const Dropdown = ({

  list,

  currentStyles,

  listStyles,

  className,

  ...others

}) => { ... }

现在我们有了这些道具，我们希望将其传递到包含DropdownView您想要定位的实际元素的您的道具中。

<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}

/>

好的，现在我们有了我们想要的样式和类名。您所要做的就是像上面那样获取道具，然后将它们设置在元素上。

<div

  className="select-box-current"

  tabIndex="0"

  autoFocus={true}

  onClick={() => toggleList()}

  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

    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"

    selectBoxCurrentStyle={{ border: "1px solid #D4D4D4" }}

    // this style is for className="select-box-list"

    selectBoxListStyle={{

        opacity: 1,

        display: "inherit",

        animationName: "none",

        cursor: "pointer"

    }}

/>

这是链接https://codesandbox.io/s/damp-rain-cyhxb?file=/src/App.js:133-643