Question

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

https://codepen.io/gaearon/pen/ozqNOV?editors=0010

Answer 1

当您在CodePen上查看笔时， CSS 部分中的代码很可能会应用样式。 HTML中可能有内联CSS，也有可能JavaScript正在操纵内联样式，但是在所有这三种情况下，您将要处理CSS代码。

您发布的example正在 CSS 标签中进行所有样式设置。 HTML 标签仅包含一个供React元素渲染的容器。

我们将以您的FancyBorder函数为例。

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

您正在构造一个类名为<div>的{{1}}，其中'FancyBorder-' + props.color是一个变量，将在以后使用。

继续您的示例，使用以下代码创建欢迎对话框：

props.color

在此代码中，您将调用function WelcomeDialog() { return ( <FancyBorder color="blue"> <h1> Welcome </h1> </FancyBorder> ); }函数并通过FancyBorder传递，该函数在原始函数中被称为color="blue"。现在，它运行props.color来生成名为'FancyBorder-' + props.color的类。

现在在 CSS 部分中，您将看到FancyBorder-blue已经设置为一个类，并已对其应用样式：

FancyBorder-blue

此特定CSS在我们刚创建的框周围应用了蓝色边框。希望这可以清除一切。

Answer 2

弄清楚了。当将选项卡最小化时，在CodePen中以编辑模式打开时，这些样式不可见。只需拖动它们或更改链接就足够了，因此默认情况下它们是打开的。只是CodePen功能=）

查看区别：

https://codepen.io/gaearon/pen/ozqNOV?editors=0010

https://codepen.io/gaearon/pen/ozqNOV

.FancyBorder {
  padding: 10px 10px;
  border: 10px solid;
}

.FancyBorder-blue {
  border-color: blue;
}

.Dialog-title {
  margin: 0;
  font-family: sans-serif;
}

.Dialog-message {
  font-size: larger;
}

这些样式来自Codepen上的reactjs示例？

2 个答案: