W mojej aplikacji React używam string.replace do zastąpienia części ciągu zmiennymi i identyfikuję zmienne za pomocą składni %VARIABLE%. A w przypadku zwykłego tekstu działa dobrze:  stała ...

1
Oystein 25 czerwiec 2021, 22:30

4 odpowiedzi

Najlepsza odpowiedź

Możesz umieścić każdy zamiennik w span i zastosować konkretną klasę i reguły CSS. Użyj dangerouslySetInnerHTML, aby wyrenderować ciąg HTML na element div/element.

const text = 'This is %FIRST%, this is %SECOND%, and this is %THIRD%.'
  .replace(/%\w+%/g, ((variable) => {
    const value = {
      '%THIRD%': 'a pear',
      '%FIRST%': 'an apple',
      '%SECOND%': 'a banana',
    }[variable] || variable;
    
    return `<span class="bold">${value}</span>`;
  }));
  
console.log(text);

const rootElement = document.getElementById("root");
ReactDOM.render(
  <div dangerouslySetInnerHTML={{ __html: text }} />,
  rootElement
);
.bold {
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root" />
1
Drew Reese 25 czerwiec 2021, 20:07

Jeśli nie lubisz dangerouslySetInnerHTML, możesz również użyć pakietu o nazwie html-react- parser. (Użyłem wersji CDN w poniższym fragmencie). Zasadniczo to, co robi, to konwertowanie kodu HTML w formacie ciągu na elementy React.

Parser konwertuje ciąg HTML na jeden lub więcej elementów React.

const App = () => {
  const text =
    "This is %FIRST%, this is %SECOND%, and this is %THIRD%.".replace(
      /%\w+%/g,
      (variable) =>
        ({
          "%THIRD%": "<b>a pear</b>",
          "%FIRST%": "<b>an apple</b>",
          "%SECOND%": "<b>a banana</b>",
        }[variable] || variable)
    );

  return <p> {window.HTMLReactParser(text)}</p>;
};

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script>
<div id="root"></div>
1
Behemoth 25 czerwiec 2021, 20:13

W tym celu możesz wykorzystać React HTML Parser:

import React, { useMemo } from 'react';
import ReactHtmlParser from 'react-html-parser';

const Component = () => {
  const text = useMemo(
    () =>
      'This is %FIRST%, this is %SECOND%, and this is %THIRD%.'.replace(
        /%\w+%/g,
        variable => {
          const replacement =
            {
              '%THIRD%': 'a pear',
              '%FIRST%': 'an apple',
              '%SECOND%': 'a banana',
            }[variable] || variable;

          return `<b>${replacement}</b>`;
        },
      ),
    [],
  );

  return <div>{ReactHtmlParser(text)}</div>;
};
1
Vinay Sharma 25 czerwiec 2021, 20:17

Możesz to zrobić za pomocą:

const var = "an apple"
const text = `This is ${var}`
console.log(text) // output: This is an apple
0
user3927415 25 czerwiec 2021, 19:38