Реагируйте на this.props не работает должным образом
Я изучаю React и пробую образец кода из книги. Код прост: он должен отображать гласные в разных цветах, определенных в ReactDOM.render, но вместо этого он отображает их все одним цветом, исходя из тега стиля.
Ниже приведен код
<!DOCTYPE html>
<html>
<head>
<meta charset- = "utf-8'">
<title>Styling in React</title>
<script src = "https://unpkg.com/react@16/umd/react.development.js"></script>
<script src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src = "https://unpkg.com/[email protected]/babel.min.js"></script>
<style>
#container {
padding: 50px;
background-color: #FFF;
}
div div div {
padding: 10px;
margin: 10px;
background-color: #ffde00;
color: #333;
display: inline-block;
font-family: monospace;
font-size: 32px;
text-align: center;
}
</style>
</head>
<body>
<div id = "container"></div>
<script type = "text/babel">
var destination = document.querySelector("#container");
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>
);
}
}
ReactDOM.render(
<div>
<Letter bgcolor = "#58B3FF">A</Letter>
<Letter bgcolor = "#FF605F">E</Letter>
<Letter bgcolor = "#FFD52E">I</Letter>
<Letter bgcolor = "#49DD8E">O</Letter>
<Letter bgcolor = "#AE99FF">U</Letter>
</div>,
destination
);
</script>
</body>
</html>
}
Ответы 2
Похоже, вы нигде не используете letterStyle. Попробуйте следующее:
render() {
var letterStyle = {
padding:10,
margin:10,
backgroundColor:this.props.bgcolor,
color:"#333",
display:"inline-block",
fontFamily:"monospace",
fontSize:32,
textAlign:"center"
};
return (
<div style = {letterStyle}>
{this.props.children}
</div>
);
}
Попробуйте {this.props.bgcolor}, вам нужен {} для использования динамических переменных.
Я пробовал, что уже дает мне ошибку babel.min.js: 27 Uncaught SyntaxError: Встроенный сценарий Babel:
Я думаю, что этот совет неверен, потому что он не использует this.props.bgcolor в блоке JSX. Место, где он использует this.props.bgcolor, находится в чистом JavaScript.
@ jaredkwright - Спасибо за комментарий о том, что НЕ используется '{}' для доступа к свойствам компонента без синтаксиса JSX. По крайней мере, это устранило мою проблему. Итак, '$ {this.props.myProp}' не расширялся в моей среде, отличной от JSX. Как только я обновил это до 'this.props.myProp ;. он начал узнаваться и, как и ожидалось, расширялся.
Вы определяете переменную
letterStyle, но никогда ее не используете ... Вероятно, ее следует добавить в<div style = {letterStyle}>{this.props.children}</div>.