这些样式在 codepen 上的 reactjs 示例中从何而来?

Question

Composition-vs-inheritance React

文档

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代码。

您发布的示例是在CSS选项卡中执行所有样式。HTML选项卡仅包含要呈现的 React 元素的容器。

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

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

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

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

function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1>
Welcome
</h1>
</FancyBorder>
);
}

在此代码中，您将调用FancyBorder函数并传递原始函数中引用为props.color的color="blue"。它现在运行'FancyBorder-' + props.color以生成一个名为：FancyBorder-blue的类。

现在在CSS部分，您将看到您的FancyBorder-blue已经设置为类并应用了样式：

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

这个特定的CSS在我们刚刚创建的框周围应用蓝色边框。希望这能解决问题。

Answer 2

想通了。在 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;
}