javascript - 我可以选择一种类型的所有反应组件，而不为每个组件分配一个类吗？

Question

我这里有一个 Playground :https://codesandbox.io/s/736v9vjzw1

const Something = ({ classes, children, variant }) => {
  return (
    <div className={classes.someThing}>
      <p> I'm some thing </p>

      <SomeOtherThing />

      <SomeOtherThing> I have some children </SomeOtherThing>

      <SomeOtherThing> I have some children </SomeOtherThing>

      <SomeOtherThing> I have some children </SomeOtherThing>
    </div>
  );
};

const styles = {
  someThing: {
    color: "green",
    border: "solid 2px black",
    margin: 30,

    "& $someOtherThing": {
      backgroundColor: "pink" // Doesn't work
    },

    "& p": {
      fontWeight: "bold" //This works but is too broad
    }
  }
};

这里有一种情况，我想在我的 SomeThing 中设置所有 SomeOtherThing 的样式。

我可以使用 & p 选择器来选择 p 元素 - 但我不喜欢这样。它会为我周围的任何随机 p 设置样式 - 我不想必须查看组件定义内部才能找到它的顶级元素是什么。

我该怎么做？类似于 & SomeOtherElement。

这在现实世界中的应用是，在某些地方我希望显示 SomeOtherElement block 和其他地方 inline-block。

Answer 1

我会扩展 SomeOtherThing 组件以接受类名并将其添加到 div(如果存在)。这也适用于生产设置，其中类名被缩小为例如.t-0-root.

这是一个 fork 的 Playground :https://codesandbox.io/s/zlzx277zzm其中展示了如何使用它。

const SomeOtherThing = ({ classes, children, className }) => {
  return (
    <p className={`${classes.someOtherThing} ${className && className}`}>
      I'm another thing {children}
    </p>
  );
};

我很可能会使用包 classnames 来有条件地呈现类名而不是字符串插值。

const Something = ({ classes, children, variant }) => {
  return (
    <div className={classes.someThing}>
      <p> I'm some thing </p>

      <SomeOtherThing />

      <SomeOtherThing className={classes.someOtherThing}>
        I have some children
      </SomeOtherThing>

      <SomeOtherThing className={classes.someOtherThing}>
        I have some children
      </SomeOtherThing>

      <SomeOtherThing className={classes.someOtherThing}>
        I have some children
      </SomeOtherThing>
    </div>
  );
};

const styles = {
  someThing: {
    color: "green",
    border: "solid 2px black",
    margin: 30
  },
  someOtherThing: {
    backgroundColor: "pink"
  }
};