Question

我不知道为什么，但是我收到了Babel抛出的“未捕获的参考错误：未定义道具”，但除非有改动，否则我看不到代码有什么问题。显然我有一些完全愚蠢的盲点。

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Am I nutty:</title>

    <!-- React JS JS 16.12.0 -->
    <script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
    <!-- React JS DOM JS 16.12.0 -->
    <script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
    <!-- Babel JS .6.26.0 -->
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>

<body>

    <div id="container"></div>


    <script type="text/babel">

        var letterStyle = {
            padding: 10,
            margin: 10,
            backgroundColor: this.props.bgcolor,
            color: "#333",
            display: "inline-block",
            fontFamily: "monospace",
            fontSize: 32,
            textAlign: "center"
        }

        class Letter extends React.Component {
            render() {
                return (
                    <div style={letterStyle}>
                        {this.props.children}
                    </div>
                );
            }
        }

        ReactDOM.render(
            <div>
                <Letter bgcolor="#333">A</Letter>
                <Letter bgcolor="#333">B</Letter>
                <Letter bgcolor="#333">C</Letter>
                <Letter bgcolor="#333">D</Letter>
            </div>, document.querySelector("#container")
        )

    </script>

</body>

</html>

Answer 1

letterStyle变量不在类的范围内，它并不指向类范围，而是指向窗口对象，该对象显然没有指定props方法或变量。

我建议您将该变量移至类中，以便实际上可以访问道具。

class Letter extends React.Component {
    render() {
        const letterStyle = {
           padding: 10,
           margin: 10,
           backgroundColor: this.props.bgcolor,
           color: "#333",
           display: "inline-block",
           fontFamily: "monospace",
           fontSize: 32,
           textAlign: "center"
        };

        return (
            <div style={this.letterStyle}>
                {this.props.children}
            </div>
        );
    }
}

注意：在极少数情况下，您可能想使用一些基本的提示或将letterStyle变量移至render方法之外，因此子级不会重新渲染。

Answer 2

您的课程应如下所示。类组件应始终使用prop调用基本构造函数。


class Letter extends React.Component {
           constructor(props){
             super(props)
           }
            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>
                );
            }
        }

在您的代码中，道具没有像上面那样被传递。因此，您会收到cannot read this.props错误。

您应该检查this是否使用React类组件。

使用样式对象时反应，无法读取this.props

2 个答案: