使用反作用箭头函数获得简单样式

Question

我很感激这在这里可能有点基础，但我对React相对较新，我正在用各种方法测试动态样式，而不是创建单独的样式表并导入它们。

我正在尝试将样式添加到三个不同的元素中——一个通过内联样式，另一个通过样式标记，另一种通过样式变量——其中似乎只有内联样式才有效。

这是我的代码，包含所有3个元素：

import React from 'react'
const App = () => {
render {
const testOneStyle = {
color: "red",
fontWeight: "bold"
};
return (
<div>
<span style={testOneStyle} className="test-one">test 1</span>
<span className="test-two">test 2</span>
<style>
.test-two {
color: red;
font-weight: bold
}
</style>
<span style={{color: "red"}} className="test-three">test 3</span>
</div>
)
} 
}
export default App

首先，变量样式(即这里(是否只适用于类组件而不是函数组件？

有人能解释为什么这不是渲染，以及如何渲染和应用样式吗？

谢谢你的建议。以下是StackBlitz演示：https://stackblitz.com/edit/react-tjukup

Answer 1

不幸的是，<style>标记在JSX中的工作方式与在html中不同。您必须自己适当地解析字符串，因为JSX只是一个带有语法糖的javascript，可以用正确的参数转换为React.createElement()函数。因此，您通常希望在JSX中避免使用style和head标记，但如果这样做了，您希望像一样使用它

<style>
{"
.test-two {
color: red;
font-weight: bold;
}
"}
</style>

编辑

此外，为了回答您的问题"；变量样式是否只适用于类组件而不适用于函数组件&">否。propstyle是一个JSX prop，无论使用何种组件都可以工作。

编辑

组件不呈现的原因是render()是一个仅在基于类的组件中使用的函数。在函数组件中，您只需直接返回JSX。

import React from "react";
const App = () => {
const testOneStyle = {
color: "red",
fontWeight: "bold"
};
return (
<div>
<span style={testOneStyle} className="test-one">
test 1 - fails
</span>
<span className="test-two">test 2 - fails</span>
<style>
{`
.test-two {
color: red;
font-weight: bold
}
`}
</style>
<span style={{ color: "red" }} className="test-three">
test 3 - works
</span>
</div>
);
};
export default App;

编辑

正如你可能在我提供的片段中所观察到的，你也可以使用带"的字符串`"以便更容易在JSX 中输入字符串

Answer 2

我希望这能帮助你

import React from 'react'
const App = () => {
const testOneStyle = {
color: "blue",
fontWeight: "bold"
};

return (
<div>
<span style={testOneStyle} className="test-one">
test 1 - fails
</span>
<span className="test-two">
test 2 - fails
</span>
<style>
{
`.test-two {
color: green;
font-weight: bold
}`
}
</style>
<span style={{color: "red"}} className="test-three">
test 3 - works
</span>
</div>
)
} 
export default App

解释：

您正在使用功能组件

类组件需要render方法才能返回JSX。功能组件可以直接返回JSX。

您可以在JSX中添加样式标记，但其中的上下文必须是字符串。