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>