REACT JSX样式[对象对象]

Soo 发表于 Dev

我正在研究React，但不了解JSX样式。这里的代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="disp"></div>
    <script type="text/babel">
        var root = document.querySelector('#disp')
        const cssStyle = {
            'color': 'red',
            'backgroud-color': '#fff0f0',
            'font-size':'2em'
        }
        const scriptStyle = {
            color: 'blue',
            backgroundColor: '#fff0f0',
            fontSize: '2em'
        }
        function getDOM() {

            return (
                <div> 
                    <div style={scriptStyle}>
                        Look at the stars
                    </div>
                    <p stlye={cssStyle}>
                        Look how they shine for you
                    </p>
                </div>
            )
        }
        ReactDOM.render(getDOM(), root)
    </script>
</body>
</html>

问题

scriptStyle很好，但是我看不到cssStyle。[对象对象]我该怎么办？

Shubham Khatri

在JSX中，样式作为对象提供，键为camelCase而不是snakeCase。例如background-color将被写成backgroundColor正是它在scriptStyle对象中的提供方式以及将其赋予样式的方式。除此之外，您还输入错字style={cssStyle}

工作演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="disp"></div>
    <script type="text/babel">
        var root = document.querySelector('#disp')
        const cssStyle = {
            'color': 'red',
            'backgroudColor': '#fff0f0',
            'fontSize':'2em'
        }
        const scriptStyle = {
            color: 'blue',
            backgroundColor: '#fff0f0',
            fontSize: '2em'
        }
        function getDOM() {

            return (
                <div> 
                    <div style={scriptStyle}>
                        Look at the stars
                    </div>
                    <p style={cssStyle}>
                        Look how they shine for you
                    </p>
                </div>
            )
        }
        ReactDOM.render(getDOM(), root)
    </script>
</body>
</html>

文件连结

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。