Question

我正在研究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。 [对象对象] 那怎么办？

Answer 1

在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>

Docs Link

Answer 2

您有错字：

<p stlye={cssStyle}>
     Look how they shine for you
</p>

应为<p style=

Answer 3

如果您使用的是Atom代码编辑器，请尝试编写一些常规的HTML样式，如下所示：

const App = () => {
  return (
    <div>
      <label class="label" for="name">Enter name:</label>
      <input id="name" type="text" />
      <button style="background-color: blue; color: white;">Submit</button>
    </div>
  );

};

您将收到一条消息，指出“样式道具必须是一个对象”，您可以在此处了解更多信息：https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/style-prop-object.md

那是什么意思？

我们必须稍微更改语法。我仍然要说样式等于，但是之后，您需要两个大括号，一个在另一个内。

外部花括号表示我们要在jsx内引用一个javascript变量，其中的第二组花括号表示一个javascript对象。

因此，当使用jsx进行样式设置而不是像上面那样提供字符串时，我们改为提供一个javascript对象，该对象的所有键都代表我们要设置样式的不同属性。这些值表示该特定样式的值。

此外，在提供诸如background-color的属性名称时，您将删除破折号并大写第二个单词，例如：backgroundColor。这就是骆驼箱。

因此，通常来说，转换很简单，只需删除双引号，用花括号将其替换，然后如果您具有复合属性名称，则删除破折号并大写。因此，考虑到这一点，我希望您能尝试在此处更新style属性。

所以上面的代码现在看起来像这样：

const App = () => {
  return (
    <div>
      <label class="label" for="name">Enter name:</label>
      <input id="name" type="text" />
      <button style={{ backgroundColor: blue; color: white; }}>Submit</button>
    </div>
  );

};

REACT JSX样式[对象对象]

3 个答案: