Question

我正在学习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/babel-standalone@6.15.0/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>
}

Answer 1

看起来你并没有在任何地方使用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>
  );
}

Answer 2

尝试{this.props.bgcolor}您需要{}来使用动态变量。

反应this.props没有按预期工作

2 个答案: