代码之家 › 专栏 › 技术社区 › Eduard

使React元素的字符串值的一部分变为粗体

reactjs javascript

Eduard · 技术社区 · 7 年前

我的文件中定义了变量:

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

正在将此字符串传递给React元素:

<span>{text}</span>

我要短信 Bolded 或 Also Bolded 在组件呈现时加粗体,但根据传递字符串的方式,我要么 [object Object] 相反,或者 <b>Bolded</b> .

我找到工作的唯一方法是:

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

但这看起来相当冗长,有时字符串很简单,不包含任何占位符,因此使用React元素包装似乎没有必要。另外,我希望能够在数据库中存储该值,当检索到该值时,应该以显示标记为粗体的文本的方式对其进行插值。

问题: 有没有办法让文字介于 <b></b> 当组件被呈现时,在一个粗体的字符串中?

1 回复 | 直到 7 年前

Arup Rakshit 7 年前

你可以通过使用 dangerouslySetInnerHTML 道具。

请看下面的代码:

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.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>

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前