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>