如何解决如何在ReactJS中将样式应用于字母？
我是ReactJS的初学者。我试图显示一些字母，其颜色编码如下所述。我可以在浏览器中显示字母。但是，我无法以颜色显示它。请帮助我解决以下HTML代码中的错误。
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title> React1</title>
<style>
#container {
padding: 50px;
background-color: #EEE;
}
#container h1 .letter{
font-size: 144px;
font-family:sans-serif;
color: #0080A9;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/babel">
class Letter extends React.Component {
render() {
var letterStyle = {
padding: 10,margin:10,backgroundColor: this.props.bgcolor,color: "#333",display: "inline-block",fontFamily: "monospace",fontSize: 32,textAlign: "center"
};
return (
<div>
{this.props.children}
</div>
);
}
}
var destination = document.querySelector("#container");
ReactDOM.render(<div>
<Letter bgcolor="#58B3FF">A</Letter>
<Letter bgcolor="#58B3FF">E</Letter>
<Letter bgcolor="#58B3FF">I</Letter>
<Letter bgcolor="#58B3FF">O</Letter>
<Letter bgcolor="#58B3FF">U</Letter>
</div>,destination
)
</script>
</body>
</html>
解决方法
似乎letterStyle已创建，但从未使用过。如果您想使用内联样式，我相信您会希望它看起来像这样：
return (
<div style={letterStyle}>
{this.props.children}
</div>
);
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
