Question

我一直在尝试找出如何将此dangerouslySetInnerHTML应用于此组件内部的label={item.description}：

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应用于功能组件中？

Answer 1

您必须确定HTML元素，该元素将在Switch组件内部呈现label属性的数据。来自https://reactjs.org/docs/dom-elements.html

的以下语法

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

但请避免使用它。不建议使用它，因为它容易受到xss攻击。尝试寻找替代者。

Answer 2

尝试一下：

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

React.js：在功能组件内部危险地实现SetInnerHTML

2 个答案: