Question

我想将字符串中的所有数字设为红色，然后使用React进行渲染。这就是我想要做的（我使用create-react-app制作了一个应用，并用自己的内容替换了App.js的内容）

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    const str = 'foo123bar';

    const strColor = 
      str.replace(/\d+/, match => <span style={{color: 'red'}}> {match} </span> );

    return (
      <div className="App">
        {strColor}
      </div>
    );
  }
}

export default App;

结果，仅foo[object Object]bar行在视口中呈现。

那么应该如何将内联样式添加到JSX？

Answer 1

我能够使用'dangerouslySetInnerHTML'解决此问题。

class App extends React.Component {
  render() {
      let str = 'foo123bar';

      const strColor = str.replace(/\d+/, match => `<span style="color: red">${match} </span>` );

    return (
        <div className="App"
         dangerouslySetInnerHTML={{__html: 
          strColor}}>
      </div>
);

} }

Answer 2

您不能将HTML插入字符串以在React中呈现，这是对XSS的保护。

在这种情况下，您可以执行以下操作：

const str = 'foo123bar';

const coloredStr = str.match(/\d+/);
const [before, after] = str.split(/\d+/)

return (
  <div className="App">
    {before}
    {coloredStr && coloredStr[0] && 
       <span style="color: red">{coloredStr[0]}</span>
    }
    {after}
  </div>
);

对于更复杂的示例，您将需要更复杂的逻辑。例如。可以设置多个零件的样式-如果您使用跨度，则可以找到所有匹配的零件和不匹配的零件，并使用指示符将它们以正确的顺序放在列表中。像这样：

list.map((elem) => elem.isColored ? <span style="color: red">{elem.value}</span> : elem.value)

编辑

如评论中所述，这是多个元素的实现：

const str = 'foo123bar456baz897ban';
let strCopy = str;
const list = [];

while(strCopy) {
    const text = strCopy.split(/\d+/, 1)[0];
    list.push(text);
    const match = strCopy.match(/\d+/);
    if (!match) {
        break;
    }
    list.push(match[0]);
    strCopy = strCopy.substring(match.index + match[0].length);
}

return (
  <div className="App">
    {list.map((elem, index) => index % 2 === 0
         ? elem
         : <span style="color: red">{elem}</span>
    )}
  </div>
);

Answer 3

“那么应该如何将内联样式添加到JSX？”

要回答您提出的问题，请输入以下行：

const strColor = str.replace(/\d+/, match => <span style={{color: 'red'}}> {match} </span> );

返回一个字符串-所以对象语句style={{color: 'red'}}> 不会逃脱。

添加带有字符串定义的内联样式，引用双引号并删除花括号：
 {match} 

您可以通过以下分隔键添加更多样式：用逗号分隔值对：
 {match} 

请注意，这将不起作用
您真正要回答的问题是如何用组件（在这种情况下为带有样式的标签）替换字符串的一部分。此问题记录在react github issue页面中，请注意有很多选择，而无需您按照先前的几个答案中所述危险地设置内部HTML：https://github.com/facebook/react/issues/3386

如何使用替换在React中为字符串的特定部分添加颜色？

3 个答案: