警告：div 标签被传递给 CSS 属性 fontSize 的数字字符串值，在 React 的未来版本中将被视为无单位数字

Question

我在尝试设置组件样式时收到此警告：

反应-dom.js:18121

Warning: a div tag (owner: Letter) was passed a numeric string value for CSS property fontSize (value: 32) which will be treated as a unitless number in a future version of React.

我的index.html文件：

<!DOCTYPE html>
<html>

<head>
   <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
   <title>React! React! React!</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
   <style>
       .myClass {
           padding: 50px;
           background-color: #EEE;
       }


   </style>
</head>

<body>
   <div class="myClass"></div>

   <script type="text/babel">

       var Letter = React.createClass({
           render: function() {

               var letterStyle = {
                   padding: 10,
                   margin: 10,
                   backgroundColor: "#ffde00",
                   color: "#333",
                   display: "inline-block",
                   fontFamily: "monospace",
                   fontSize: "32",
                   textAlign: "center"
               };

               return (
                  <div style={letterStyle}>
                      {this.props.children}
                  </div>
               );
        }
    });


    ReactDOM.render(
           <div>
               <Letter>A</Letter>
               <Letter>E</Letter>
               <Letter>I</Letter>
               <Letter>O</Letter>
           </div>,
           document.querySelector(".myClass")
       );
   </script>
</body>

</html>

输出结果：

有没有办法避免这个警告？

Answer 1

您还没有为字体大小、填充和边距指定单位。像这样制作你的 letterStyle 对象：

var letterStyle = {
  padding: "10px",
  margin: "10px",
  backgroundColor: "#ffde00",
  color: "#333",
  display: "inline-block",
  fontFamily: "monospace",
  fontSize: "32px",
  textAlign: "center"
};

React 团队只是警告您，尽管 "px" 后缀当前会自动附加到 fontSize 属性（与当前对对象中的 padding 和 margin 属性所做的相同） )，在 React 的未来版本中不会出现这种情况。他们提前警告您始终指定您想要的单位（即 - px、em、% 等）。

警告：div 标签被传递给 CSS 属性 fontSize 的数字字符串值，在 React 的未来版本中将被视为无单位数字

Warning: a div tag was passed a numeric string value for CSS property fontSize which will be treated as a unitless number in a future version of React

css

reactjs

react-dom