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() 的内容，但这可能是不必要的。

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

3 个答案: