我一直在尝试弄清楚如何在这个组件中对这个label={item.description}应用dangerouslySetInnerHTML:
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?
发布于 2019-07-15 16:51:31
试试这个:
<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}
          />或
label= {<span className="content" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.description) }}></span>}https://stackoverflow.com/questions/57032676
复制相似问题