更新
（以及正确答案 - 行下方的内容仅供参考，为 Chromium 论坛上的讨论提供上下文，因为 this issue 最初是作为浏览器错误发布的）。
虽然它可能看起来像一个错误，但实现是正确的。这是一个特点。简而言之，任何display:inline 元素都是文档流中的“字母”。如果您决定不在字母之间放置任何空格（或任何可能被解释为空格的内容），text-transform:capitalize 应该只将您的“单词”中的第一个字母大写。
要修复它，请提供您的链接 display:inline-block 或使用 display:inline-block;content:''; 添加伪链接（:before 或 :after）
上一次更新：
TL、DR；
nav a:before {
content: ''; /* copy-paste a zero-width-space (​) character */
}
... 或者只是在你的锚文本前加上 ​ 似乎可以解决这个问题。
但是，要清楚一点，上面是一个黑客。一种解决方法。
另一个修复方法是将nav a 的显示属性设置为除inline 之外的任何值，这是默认值——是的，display:none; 也修复了它。为了好！ツ...
...这导致了第三种选择，甚至更少干扰并且不需要字符播放难以获得：
nav a:before {
content: ''; /* empty string, no specials here */
display: inline-block;
}
如果您需要:befores，也可以在nav a:after 上使用。解决它的方法是打破连续的inline 流。
更新答案：
您似乎发现了一个错误，该错误目前存在于 Chrome 和 Firefox 中。我还没有测试过其他浏览器，但我希望在其他基于 webkit 的浏览器（Safari、Edge、Opera）中体验到这一点。我已经向Chromium 提交了这个错误，它很可能会在 Chrome 中为它生成一个修复程序，并在不久之后在 Firefox 中生成一个修复程序。
正如您在添加 mcve 之前所怀疑的那样，它与 React 无关。我可以在这里复制它，使用简单的标记：
nav a {
margin: 1em;
text-transform: capitalize;
}
<div><nav><a href="/">home</a><a href="/2">page 2</a><a href="/3">page 3</a></nav><div>
最奇怪的是...如果您将每个元素放在不同的行（在标记中）...它开始正常工作，没有任何其他更改。
nav a {
margin: 1em;
text-transform: capitalize;
}
<div><nav><a href="/">home</a>
<a href="/2">page 2</a>
<a href="/3">page 3</a></nav><div>
这导致我尝试在每个锚点的开头添加一个零宽度空间&#8203;，这显然也解决了问题：
nav a {
margin: 1em;
text-transform: capitalize;
}
nav a:before {
content: '';
}
<div><nav><a href="/">home</a><a href="/2">page 2</a><a href="/3">page 3</a></nav><div>
要将修复应用于您的示例，请将此行放在您的 <nav> 之前：
<style>nav a:before{'{'}content:'​'{'}'}</style>
但是，它仍然是 Chrome 中的一个长期错误，应该在他们的论坛上报告（并修复）。
初步答案（在看到示例之前）
React 是 JavaScript。
text-transform: capitalize;
... 是 CSS。如果 React 处理它，文本将在放入标记之前进行转换。 text-transform 的全部意义在于使标记中的文本保持不变并（通过浏览器）进行转换。
所以你的问题并不是真正的错误，与 React 无关。这与您的浏览器尚未实现 text-transform:capitalize 有关。或者没有正确应用它。
请参阅兼容性表 here 和 here。不幸的是，很难确定（除了自己尝试之外）浏览器是否支持部分支持的属性的特定值。
在您的浏览器支持之前，您必须使用 React（或 vanilla）或您选择的库（即：lodash 有 _.capitalize()）来大写您的文本。
这个简单的例子会告诉你你当前的浏览器是否支持它：
capitalize-meh {
text-transform: capitalize;
}
<capitalize-meh>i should be capitalized...</capitalize-meh>
在不支持 capitalize 的 CSS 的浏览器中“修复”此问题的唯一方法是定义您自己的函数：
capitalize(string) {
return string.toLowerCase().replace(/(^|\s)\S/g, l => l.toUpperCase())
}
测试：
class TextExample extends React.Component {
constructor(props) {
super(props);
this.text = props.text || '';
}
capitalize(string) {
return string.toLowerCase().replace(/(^|\s)\S/g, l => l.toUpperCase())
}
render() {
return (<text>{this.capitalize(this.text)}</text>);
}
}
ReactDOM.render(
new TextExample({text:'what eVaH...'}).render(),
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>