diff --git a/packages/inula/__tests__/DomTest/Attribute.test.js b/packages/inula/__tests__/DomTest/Attribute.test.js index 27e5becb..a216bc5b 100644 --- a/packages/inula/__tests__/DomTest/Attribute.test.js +++ b/packages/inula/__tests__/DomTest/Attribute.test.js @@ -95,4 +95,16 @@ describe('Dom Attribute', () => { Inula.render(
, container); }).not.toThrow(); }); + + it('dangerouslySetInnerHTML和children同时设置,只渲染children', () => { + Inula.act(() => { + Inula.render( +
+ 123 +
, + container + ); + }); + expect(container.innerHTML).toBe('
123
'); + }); }); diff --git a/packages/inula/src/dom/validators/ValidateProps.ts b/packages/inula/src/dom/validators/ValidateProps.ts index 2a6b27e1..18cf48c3 100644 --- a/packages/inula/src/dom/validators/ValidateProps.ts +++ b/packages/inula/src/dom/validators/ValidateProps.ts @@ -17,6 +17,25 @@ import { getPropDetails, PROPERTY_TYPE, PropDetails } from './PropertiesData'; const INVALID_EVENT_NAME_REGEX = /^on[^A-Z]/; +const voidTagElements = [ + 'area', + 'base', + 'br', + 'col', + 'embed', + 'hr', + 'img', + 'input', + 'keygen', + 'link', + 'meta', + 'param', + 'source', + 'track', + 'wbr', + 'menuitem', +]; + // 是内置元素 export function isNativeElement(tagName: string, props: Record) { return !tagName.includes('-') && props.is === undefined; @@ -108,6 +127,18 @@ export function validateProps(type, props) { throw new Error('style should be a object.'); } + // 对于没有children的元素,设置dangerouslySetInnerHTML不生效 + if (voidTagElements.includes(type)) { + if (props.dangerouslySetInnerHTML != null) { + delete props.dangerouslySetInnerHTML; + } + } + + // dangerouslySetInnerHTML和children同时设置,只渲染children + if (props.dangerouslySetInnerHTML != null && props.children != null) { + delete props.dangerouslySetInnerHTML; + } + if (isDev) { // 校验属性 const invalidProps = Object.keys(props).filter(key => !isValidProp(type, key, props[key]));