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

【问题标题】：How to edit the styling of multple elements in React.js如何在 React.js 中编辑多个元素的样式
【发布时间】：2016-10-25 15:19:11
【问题描述】：

刚刚完成了我的 Codecademy react 课程，但我对样式等一些概念仍然有些模糊。

通常，如果我必须在 css 中设置一个列表的样式，它看起来像：

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

现在，如果我是在 HTML 表单之外编写的，而是通过 JSX，我知道我可以将样式分配给一个变量，例如：

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

并将其应用于我的元素，例如：

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

但是，当我在列表中有多个项目并且需要对所有项目应用相同的样式时，这似乎有点多余，如下所示：

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 的思维方式应用样式？

【问题讨论】：

拥有className 并添加css 样式表有什么问题？
为什么不将链接存储为数组['Home', 'About Us', 'Contact Us'].map(x=><li style={listStyle}>{x}</li>)
猜猜这是真的。我试图从基本的 HTML 表创建一个页面，希望没有 CSS 样式表——试图将它全部放入我的 React 文件中。编辑：实际上，数组的想法可能会更好。谢谢。

标签： javascript html css reactjs

【解决方案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>
        );
    }

【讨论】：