首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Reactjs:在功能组件中实现dangerouslySetInnerHTML

Reactjs:在功能组件中实现dangerouslySetInnerHTML
EN

Stack Overflow用户
提问于 2019-07-15 10:35:36
回答 1查看 329关注 0票数 1

我一直在尝试弄清楚如何在这个组件中对这个label={item.description}应用dangerouslySetInnerHTML

代码语言:javascript
运行
复制
const SwitchList = ({
  color,
  disabled,
  sortKey,
  sortDirection = SORT_DIRECTION.ASC,
  items,
  data,
  children,
  onChange
}) => {
  if (items.length === 0) {
    return React.Children.only(children);
  }
  let sortProp = null;
  let sortedItems = items;
  if (sortKey) {
    sortProp = new SortProperty(sortKey, sortDirection === SORT_DIRECTION.ASC);
    sortedItems = items.sort(genericObjectSort(sortProp));
  }
  return (
    <div>
      {sortedItems.map(item => {
        return (
          <Switch
            checked={data[item.key]}
            label={item.description}
            onChange={onChange(item.key)}
            key={item.key}
            color={color}
            disabled={
              typeof disabled === "function" ? disabled(item) : disabled
            }
            className={styles.customSwitch}
          />
        );
      })}
    </div>
  );
};
SwitchList.propTypes = {
  sortKey: PropTypes.string,
  sortDirection: PropTypes.number,
  items: PropTypes.arrayOf(PropTypes.object),
  data: PropTypes.object,
  children: PropTypes.node,
  color: PropTypes.string,
  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
  onChange: PropTypes.func
};

export default SwitchList;

帮助器函数不起作用,因为这不是基于类的组件。

如何获取{items.description}并在功能组件中应用dangerouslySetInnerHTML

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-15 16:51:31

试试这个:

代码语言:javascript
运行
复制
<Switch
            checked={data[item.key]}
            label={<span dangerouslySetInnerHTML={{__html:item.description}}></span>}
            onChange={onChange(item.key)}
            key={item.key}
            color={color}
            disabled={
              typeof disabled === "function" ? disabled(item) : disabled
            }
            className={styles.customSwitch}
          />

代码语言:javascript
运行
复制
label= {<span className="content" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.description) }}></span>}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57032676

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档