Как отредактировать стиль мультиплексных элементов в React.js

Question

Только что закончил курс моей Codecademy, и я все еще немного нечеткий по некоторым понятиям, таким как стилизация.

Обычно, если я должен был стиль списка в CSS, это будет выглядеть так:

li { 
    text-decoration: none, 
    color: 'white' 
} 

Теперь, если бы я написал, что за пределами HTML-листа, а вместо этого через JSX, я знаю, что я может назначить стиль переменной как:

var linkStyle = { 
    textDecoration: 'none', 
    color: 'white' 
} 

и применить его к моим элементам, как:

<li style={listStyle}>Home</li> 

H owever, это кажется немного излишним, когда у меня есть несколько элементов в списке и нужно применить тот же стиль для всех из них, как показано ниже:

render: function() { 
     return (
      <div style={divStyle}> 
       <ul> 
        <li style={listStyle}><a href='#' style={linkStyle}>Home</a></li> 
        <li style={listStyle}><a href='#' style={linkStyle}>About Us</a></li> 
        <li style={listStyle}><a href='#' style={linkStyle}>Contact Us</a></li> 
        <li style={listStyle}><a href='#' style={linkStyle}>Library</a></li> 
       </ul> 
      </div> 
     ); 
    } 

Как избежать этого и применить стили в DRY способ мышления?

Answer 1

Если вы хотите использовать только inline styles, вы можете сделать содержание как массив и вызвать map над ним

render: function() { 
     return (
      <div style={divStyle}> 
       <ul> 
       { 
        ['Home', 'About us', 'Contact Us', 'Library'] 
        .map((el) => 
        <li style={listStyle}> 
         <a href='#' style={linkStyle}>{el}</a> 
        </li> 
        ) 
        } 
       </ul> 
      </div> 
     ); 
    }