zoukankan      html  css  js  c++  java
  • Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string

    1、错误描述

    2、错误原因

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="../js/react.development.js"></script>
    		<script src="../js/react-dom.development.js"></script>
    		<script src="../js/babel.min.js"></script>
    	</head>
    	<body>
    		<div id="tree"></div>
    		<script type="text/babel">
    			function SendMsg(props){
    				return <label style="color:red;">{props.name}</label>
    			}
    			
    			const user = <SendMsg name="李四"/>;
    			
    			ReactDOM.render(
    				user,
    				document.getElementById('tree')
    			);
    		</script>
    	</body>
    </html>
    

        在使用style定义元素样式时,不能像在HTML中直接将属性写到style中,需要使用一个变量接收样式属性的值

    3、解决办法

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="../js/react.development.js"></script>
    		<script src="../js/react-dom.development.js"></script>
    		<script src="../js/babel.min.js"></script>
    	</head>
    	<body>
    		<div id="tree"></div>
    		<script type="text/babel">
    			function SendMsg(props){
    				return <label style={{color:props.color}}>{props.name}</label>
    			}
    			
    			const user = <SendMsg color="red" name="李四"/>;
    			
    			ReactDOM.render(
    				user,
    				document.getElementById('tree')
    			);
    		</script>
    	</body>
    </html>
    
  • 相关阅读:
    [BZOJ2738]矩阵乘法
    [BZOJ2084][Poi2010]Antisymmetry
    [BZOJ2095][Poi2010]Bridges
    [BZOJ1294][SCOI2009]围豆豆Bean
    [AtCoderContest075F]Mirrored
    [AtCoderContest015D]A or...or B Problem
    [UOJ#276]【清华集训2016】汽水
    忠诚的皇家守卫团——中间件
    Django(五):视图和路由系统
    Django(四):ORM
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13313717.html
Copyright © 2011-2022 走看看