admin管理员组文章数量:1335624
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?
- 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
1 Answer
Reset to default 5You 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
版权声明:本文标题:javascript - Make part of a string value for React Element bold - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742239220a2438645.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论