React技巧之设置行内样式

在React中设置行内样式：

1. 将元素的style prop设置为对象。
2. 为元素的样式设置指定的属性和值。
3. 比如说，

// App.js

const App = () => {
  const stylesObj = {
    backgroundColor: 'lime',
    color: 'white',
  };

  const elementWidth = 150;

  return (
    

      {/* ️ set inline styles directly */}
   {/* ️ 直接设置行内样式 */}
      

        Some content
      

      


      {/* ️ set inline styles using an object variable */}
      {/* ️ 使用对象变量设置行内样式 */}
      
Some content

      


      {/* ️ set inline styles conditionally using a ternary */}
      {/* ️ 使用三元运算符设置行内样式 */}
      

        Some content
      

      


      {/* ️ set inline styles interpolating a variable into a string */}
      {/* ️ 在字符串中插入变量，来设置行内样式 */
      

        Some content
      
    
  );
};

export default App;

 

方式

直接设置行内样式

第一个示例是直接在元素上设置行内样式。

  Some content

 

需要注意的是，当在style对象上设置样式时，多单词属性诸如background-color 需要设置为驼峰样式。style属性的值被包装在两对花括号中。

行内样式的第一对花括号标志着表达式的开始，第二对花括号是包含样式和值的对象。

提取到变量中

第二个示例将样式对象提取到一个变量中。

 

const App = () => {
  const stylesObj = {
    backgroundColor: 'lime',
    color: 'white',
  };

  return (
    

      {/* ️ set inline styles using an object variable */}
      
Some content
    
  );
};

export default App;

当你有多个元素共享相同的样式时，你可以使用该方法。

三元运算符

在React中，可以使用三元运算符来有条件地设置行内样式。

  Some content

 

三元运算符与if/else语法非常相似。

问号前的部分会被计算，如果它返回一个真值(truthy)，运算符会返回冒号前的值，否则会返回冒号后的值。

示例中的三元运算符检查字符串hi的length属性是否等于2 ，如果等于，则返回字符串violet作为backgroundColor属性的值；否则返回字符串mediumblue作为backgroundColor属性的值。

模板字符串

在设置行内样式时，还可以用字符串插入表达式或变量。

const App = () => {
  const elementWidth = 150;

  return (
    

      {/* ️ set inline styles interpolating a variable into a string */}
      

        Some content
      
    
  );
};

export default App;