如何在React.js中编辑多个元素的样式

Question

Just finished my Codecademy react courses, and I'm still a bit fuzzy on some concepts like styling.

Normally, if I had to style a list in css, it would look like:

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

Now, if I had written that outside of the HTML sheet, and instead through JSX, I know that I can assign the styling to a variable like:

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

And apply it to my elements like:

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

However, this seems a bit redundant when I have multiple items in the list and need to apply the same style to all of them, as shown below:

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>
        );
    }  

How do I avoid this and apply the styles in a DRY way of thinking?

Answer 1

If you want to use only inline styles , you can make the content as an array and call a map over it

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>
        );
    }