Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Warn on nested EventTragets in experimental event API (#15287)

Browse Source
This commit is contained in:
Dominic Gannaway
2019-04-01 15:47:03 +01:00
committed by GitHub
parent a050f3d459
commit 9444a54720
4 changed files with 72 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-dom/src/client/ReactDOMHostConfig.js
Vendored
+5
View File
@@ -190,6 +190,11 @@ export function getChildHostContextForEvent(
let eventData = null;
if (type === REACT_EVENT_COMPONENT_TYPE) {
warning(
parentHostContextDev.eventData === null ||
!parentHostContextDev.eventData.isEventTarget,
'validateDOMNesting: React event targets must not have event components as children.',
);
eventData = {
isEventComponent: true,
isEventTarget: false,
packages/react-noop-renderer/src/createReactNoop.js
Vendored
+4
View File
@@ -268,6 +268,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
) {
if (__DEV__ && enableEventAPI) {
if (type === REACT_EVENT_COMPONENT_TYPE) {
warning(
parentHostContext !== EVENT_TARGET_CONTEXT,
'validateDOMNesting: React event targets must not have event components as children.',
);
return EVENT_COMPONENT_CONTEXT;
} else if (type === REACT_EVENT_TARGET_TYPE) {
warning(
packages/react-reconciler/src/__tests__/ReactFiberEvents-test-internal.js
Vendored
+59
View File
@@ -200,6 +200,25 @@ describe('ReactFiberEvents', () => {
'Warning: validateDOMNesting: React event targets must be direct children of event components.',
);
});
it('should warn if an event target has an event component as a child', () => {
const Test = () => (
<EventComponent>
<EventTarget>
<EventComponent>
<span>Child 1</span>
</EventComponent>
</EventTarget>
</EventComponent>
);
expect(() => {
ReactNoop.render(<Test />);
expect(Scheduler).toFlushWithoutYielding();
}).toWarnDev(
'Warning: validateDOMNesting: React event targets must not have event components as children.',
);
});
});
describe('TestRenderer', () => {
@@ -368,6 +387,26 @@ describe('ReactFiberEvents', () => {
'Warning: validateDOMNesting: React event targets must be direct children of event components.',
);
});
it('should warn if an event target has an event component as a child', () => {
const Test = () => (
<EventComponent>
<EventTarget>
<EventComponent>
<span>Child 1</span>
</EventComponent>
</EventTarget>
</EventComponent>
);
const root = ReactTestRenderer.create(null);
expect(() => {
root.update(<Test />);
expect(Scheduler).toFlushWithoutYielding();
}).toWarnDev(
'Warning: validateDOMNesting: React event targets must not have event components as children.',
);
});
});
describe('ReactDOM', () => {
@@ -535,6 +574,26 @@ describe('ReactFiberEvents', () => {
'Warning: validateDOMNesting: React event targets must be direct children of event components.',
);
});
it('should warn if an event target has an event component as a child', () => {
const Test = () => (
<EventComponent>
<EventTarget>
<EventComponent>
<span>Child 1</span>
</EventComponent>
</EventTarget>
</EventComponent>
);
expect(() => {
const container = document.createElement('div');
ReactDOM.render(<Test />, container);
expect(Scheduler).toFlushWithoutYielding();
}).toWarnDev(
'Warning: validateDOMNesting: React event targets must not have event components as children.',
);
});
});
describe('ReactDOMServer', () => {
packages/react-test-renderer/src/ReactTestHostConfig.js
Vendored
+4
View File
@@ -133,6 +133,10 @@ export function getChildHostContextForEvent(
): HostContext {
if (__DEV__ && enableEventAPI) {
if (type === REACT_EVENT_COMPONENT_TYPE) {
warning(
parentHostContext !== EVENT_TARGET_CONTEXT,
'validateDOMNesting: React event targets must not have event components as children.',
);
return EVENT_COMPONENT_CONTEXT;
} else if (type === REACT_EVENT_TARGET_TYPE) {
warning(