javascript - Make part of a string value for React Element bold - Stack Overflow

admin管理员组

文章数量:1329937

I have the variable defined in my file:

var text = `The start of string ${<b>{this.state.isTrue ? 'Bolded' : 'Also Bolded'</b>} the end of string.`

This string is being passed to a React element:

<span>{text}</span>

I want the texts Bolded or Also Bolded to be bolded when the ponent renders, but depending on the way I am trying to pass the string, I either get [object Object] instead or <b>Bolded</b>.

The only way that I found working was this:

var text = <React.Fragment>The start of string {<b>{this.state.isTrue ? 'Bolded' : 'Also Bolded'</b>} the end of string.</React.Fragment>

But this seems rather verbose and sometimes string is plain and does not contain any placeholders, so using React element to wrap it seems unnecessary. Plus, I would like to be able to store the value in the database and when retrieved it should be interpolated in a way that would show the text that is marked as bolded - bolded.

Question: Is there any way to have the text between <b></b> within a string bolded when the ponent gets rendered?

I have the variable defined in my file:

var text = `The start of string ${<b>{this.state.isTrue ? 'Bolded' : 'Also Bolded'</b>} the end of string.`

This string is being passed to a React element:

<span>{text}</span>

I want the texts Bolded or Also Bolded to be bolded when the ponent renders, but depending on the way I am trying to pass the string, I either get [object Object] instead or <b>Bolded</b>.

The only way that I found working was this:

var text = <React.Fragment>The start of string {<b>{this.state.isTrue ? 'Bolded' : 'Also Bolded'</b>} the end of string.</React.Fragment>

But this seems rather verbose and sometimes string is plain and does not contain any placeholders, so using React element to wrap it seems unnecessary. Plus, I would like to be able to store the value in the database and when retrieved it should be interpolated in a way that would show the text that is marked as bolded - bolded.

Question: Is there any way to have the text between <b></b> within a string bolded when the ponent gets rendered?

• javascript
• reactjs

Share Improve this question Follow edited Aug 27, 2018 at 10:31 Eduard asked Aug 26, 2018 at 20:57 EduardEduard 9,2151111 gold badges4646 silver badges7272 bronze badges 2

• What do you mean by place holder? – Arup Rakshit Commented Aug 26, 2018 at 21:08
• @ArupRakshit parts of the template string that get interpolated on execution: text ${placeholder} text – Eduard Commented Aug 27, 2018 at 10:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You can achive what you are trying to acplish using the dangerouslySetInnerHTML props.

Look at the code below:

function App(props) {
  const text = {
    __html: `The start of string <b>${
      props.isTrue ? "Bolded" : "Also Bolded"
    } </b> the end of string.`
  };

  return <span dangerouslySetInnerHTML={text} />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App isTrue={true} />, rootElement);

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

本文标签： javascriptMake part of a string value for React Element boldStack Overflow