我们可以在React中的Const中设置样式吗?

Question

我是react的新手，我可以在const中设置样式

我的代码

const initialStudentCounter =
'Students' + ' ' +  JSON.stringify(studentCountInitial);

我需要样式这个JSON.stringify(studentCountInitial)">

我试过这种方法，但是没有成功

const initialStudentCounter =
'Students' + ' ' +  <span style={color : 'red'}>JSON.stringify(studentCountInitial)</span> ;

有人能帮我一下吗

Answer 1

在JSX中不需要JSON.stringify。您确实需要将其与周围元素一起插入到JSX中。您也不应该再需要+来连接字符串了。

export default function App() {
const studentCountInitial = 4;
const initialStudentCounter = <div>Students <span style={{color : 'red'}}>{studentCountInitial}</span></div>;
return (
initialStudentCounter
);
}

Answer 2

在React中，你需要使用双花括号(第一组花括号告诉编译器这是Javascript，第二组花括号告诉编译器这是一个对象)来样式化元素。另外，用字符串把元素括起来。

代码:

const initialStudentCounter =
'Students' + ' ' + `<span style={{ color : 'red' }}>${JSON.stringify(studentCountInitial)}</span>`;

Answer 3

这里至少有两个问题:

• 您正在将字符串与JSX元素连接。
• 你的style属性的值缺少一对花括号打开和关闭一个对象(第一对仅仅让你使用JS语法)。

const initialStudentCounter = <p>Students <span style={{color : 'red'}}>{JSON.stringify(studentCountInitial)}</span></p>;

我还怀疑studentCountInitial只是一个普通数字，因此它可能不需要字符串化。所以你可以这样做。

const initialStudentCounter = <p>Students <span style={{color : 'red'}}>{studentCountInitial}</span></p>;

如果您确实需要将JSX元素转换为字符串，您可以使用ReactDOMServer.renderToStaticMarkup()，但这可能是不必要的。