脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React 报错Style prop object

解决React报错Style prop value must be an object

 更新时间：2022年12月02日 15:07:58   作者：Borislav Hadzhiev  
这篇文章主要为大家介绍了React报错Style prop value must be an object解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

总览

在React中，当我们为元素的style 属性传递字符串时，会产生"Style prop value must be an object"警告。为了解决该警告，使用从属性到值的映射。比如说，style={{paddingLeft: '15px'}} 。

这里有个例子来展示错误是如何发生的。

// App.js
const App = () => {
  // ⛔️ Style prop value must be an object eslint(react/style-prop-object)
  return (
    <div>
      <h1 style="margin-left: 4rem">Hello world</h1>
    </div>
  );
};
export default App;

映射

上述代码的问题在于，我们为h1元素的style属性传递了字符串。相反，style属性应该传递从属性到值的映射。

const App = () => {
  return (
    <div>
      <h1
        style={{
          marginLeft: '4rem',
          fontSize: '20px',
          padding: '20px',
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        Hello world
      </h1>
    </div>
  );
};
export default App;

需要注意的是，这里我们使用了2对大括号。外侧的大括号是对一个表达式的求值，内侧的大括号是包含属性名称和值的对象。

你还可以使用逻辑来计算特定的值。

const App = () => {
  return (
    <div>
      <h1
        style={{
          marginLeft: 2 + 2 + 'rem',
          fontSize: Math.random() > 0.5 ? '20px' : '40px',
          padding: '20px',
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        Hello world
      </h1>
    </div>
  );
};
export default App;

提取

你也可以将包含属性和值的对象提取到一个变量中。

const App = () => {
  const h1Styles = {
    marginLeft: 2 + 2 + 'rem',
    fontSize: Math.random() > 0.5 ? '20px' : '40px',
    padding: '20px',
    backgroundColor: 'salmon',
    color: 'white',
  };
  return (
    <div>
      <h1 style={h1Styles}>Hello world</h1>
    </div>
  );
};
export default App;

需要注意的是，CSS属性的命名必须是驼峰式。另一种方法是将你的CSS写在一个以.css为扩展名的文件中，并使用className属性来为你的元素声明样式。

下面是我们如何将h1元素的样式移到一个名为App.css的文件中的一个类中。

.my-h1 {
  margin-left: 4rem;
  font-size: 20px;
  padding: 20px;
  background-color: salmon;
  color: white;
}

然后，我们可以导入该css文件，并使用my-h1类。

import './App.css';
const App = () => {
  return (
    <div>
      <h1 className="my-h1">Hello world</h1>
    </div>
  );
};
export default App;

这是对内联样式的一种替代。需要注意的是，这个属性被称为className而不是class。原因是：class是JavaScript中的一个保留词。class关键字是用来声明ES6类的。

以上就是解决React报错Style prop value must be an object的详细内容，更多关于React 报错Style prop object的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • React的组件协同使用实现方式

    React的组件协同使用实现方式

    这篇文章主要介绍了React的组件协同使用,文中给大家提到在React开发中，有哪些场景的组件协同？又如何去实现组件的协同使用呢？本文都给大家提到，感兴趣的朋友跟随小编一起看看吧
    2021-09-09
  • 关于React16.0的componentDidCatch方法解读

    关于React16.0的componentDidCatch方法解读

    这篇文章主要介绍了关于React16.0的componentDidCatch方法解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • react脚手架如何配置less和ant按需加载的方法步骤

    react脚手架如何配置less和ant按需加载的方法步骤

    这篇文章主要介绍了react脚手架如何配置less和ant按需加载的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • react-router-dom v6版本跳转路径的实现方法

    react-router-dom v6版本跳转路径的实现方法

    这篇文章主要介绍了react-router-dom v6版本跳转路径的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • react-native 实现购物车滑动删除效果的示例代码

    react-native 实现购物车滑动删除效果的示例代码

    这篇文章主要介绍了react-native 实现购物车滑动删除效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 关于getDerivedStateFromProps填坑记录

    关于getDerivedStateFromProps填坑记录

    这篇文章主要介绍了关于getDerivedStateFromProps填坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • 解决React报错React.Children.only expected to receive single React element child

    解决React报错React.Children.only expected to rece

    这篇文章主要为大家介绍了React报错React.Children.only expected to receive single React element child分析解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • 重新理解 React useRef原理

    重新理解 React useRef原理

    这篇文章主要为大家介绍了React useRef原理的深入理解分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • 详解React开发中使用require.ensure()按需加载ES6组件

    详解React开发中使用require.ensure()按需加载ES6组件

    本篇文章主要介绍了详解React开发中使用require.ensure()按需加载ES6组件，非常具有实用价值，需要的朋友可以参考下
    2017-05-05
  • React实现分页效果

    React实现分页效果

    这篇文章主要为大家详细介绍了React实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06

最新评论