reactjs - 如何在 React 函数组件中以 html 格式显示 props?
问题描述
想要将自定义的 html 元素传递给函数组件,但似乎它被视为纯字符串。
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<div id="mydiv"></div>
<script type="text/babel" src="t21.js"></script>
</body>
</html>
js文件是
const InfoMsg = (props) => {
return <div>
{props.parm}
</div>;
}
const Hello = (props) => {
console.log(props);
let divElem;
switch (props.type)
{
case 'info':
divElem = InfoMsg(props);
break;
}
return divElem;
}
ReactDOM.render(<Hello type='info' parm='<h2>info</h2>' />, document.getElementById('mydiv'));
如何让 InfoMsg 返回<div><h2>info</h2></div>
?现在它正在回归<div>"<h2>info</h2>"</div>.
解决方案
您将其作为字符串传递。
因此它将显示为字符串。
你可以试试:dangerouslySetInnerHTML
选项。
或者您可以将其作为 dom 对象传递。
<Hello type='info' parm={<h2>info</h2>} />
推荐阅读
- html - 当我尝试通过 iframe 访问页面时,页面抛出错误
- javascript - Firebase orderByKey().startAt() 未按预期工作。怎么了?
- https - 如何为 GKE Ingress 设置 TLS 连接
- vue.js - 将 vue 组件发布到 npm 时需要添加哪些依赖项?
- java - 在 Spring MVC 应用程序上获取空的招摇 UI
- dart - Flutter - 在同一页面上添加卡片列表和文本后出现异常
- docker - 在 docker 中处理服务配置的最佳实践
- c - 在 C 中的预增量运算符中获得更多增量输出
- charts - 显示 Google 表格数据集中数字数量的图表
- javascript - 我应该如何获取表单的输入,并将该输入发送到 C# 类?ASP.Net Core - 剃刀页面