Show a soft error when a text string or number is supplied as a child to non text wrappers (#21953)

* Show soft errors when a text string or number is supplied as a child instead of throwing an error

* bring __DEV__ check first so that things inside get removed in prod.

* fix lint
This commit is contained in:
Sota
2021-08-10 13:14:11 -07:00
committed by GitHub
parent da627ded86
commit e9b2028b32
4 changed files with 18 additions and 19 deletions

View File

@@ -22,8 +22,6 @@ import type {
import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
import {create, diff} from './ReactNativeAttributePayload';
import invariant from 'shared/invariant';
import {dispatchEvent} from './ReactFabricEventEmitter';
import {
@@ -264,10 +262,11 @@ export function createTextInstance(
hostContext: HostContext,
internalInstanceHandle: Object,
): TextInstance {
invariant(
hostContext.isInAParentText,
'Text strings must be rendered within a <Text> component.',
);
if (__DEV__) {
if (!hostContext.isInAParentText) {
console.error('Text strings must be rendered within a <Text> component.');
}
}
const tag = nextReactTag;
nextReactTag += 2;

View File

@@ -147,11 +147,11 @@ export function createTextInstance(
hostContext: HostContext,
internalInstanceHandle: Object,
): TextInstance {
invariant(
hostContext.isInAParentText,
'Text strings must be rendered within a <Text> component.',
);
if (__DEV__) {
if (!hostContext.isInAParentText) {
console.error('Text strings must be rendered within a <Text> component.');
}
}
const tag = allocateTag();
UIManager.createView(

View File

@@ -524,7 +524,7 @@ describe('ReactFabric', () => {
});
});
it('should throw for text not inside of a <Text> ancestor', () => {
it('should console error for text not inside of a <Text> ancestor', () => {
const ScrollView = createReactNativeComponentClass('RCTScrollView', () => ({
validAttributes: {},
uiViewClassName: 'RCTScrollView',
@@ -542,7 +542,7 @@ describe('ReactFabric', () => {
act(() => {
ReactFabric.render(<View>this should warn</View>, 11);
});
}).toThrow('Text strings must be rendered within a <Text> component.');
}).toErrorDev(['Text strings must be rendered within a <Text> component.']);
expect(() => {
act(() => {
@@ -553,7 +553,7 @@ describe('ReactFabric', () => {
11,
);
});
}).toThrow('Text strings must be rendered within a <Text> component.');
}).toErrorDev(['Text strings must be rendered within a <Text> component.']);
});
it('should not throw for text inside of an indirect <Text> ancestor', () => {

View File

@@ -473,7 +473,7 @@ describe('ReactNative', () => {
);
});
it('should throw for text not inside of a <Text> ancestor', () => {
it('should console error for text not inside of a <Text> ancestor', () => {
const ScrollView = createReactNativeComponentClass('RCTScrollView', () => ({
validAttributes: {},
uiViewClassName: 'RCTScrollView',
@@ -487,9 +487,9 @@ describe('ReactNative', () => {
uiViewClassName: 'RCTView',
}));
expect(() => ReactNative.render(<View>this should warn</View>, 11)).toThrow(
'Text strings must be rendered within a <Text> component.',
);
expect(() =>
ReactNative.render(<View>this should warn</View>, 11),
).toErrorDev(['Text strings must be rendered within a <Text> component.']);
expect(() =>
ReactNative.render(
@@ -498,7 +498,7 @@ describe('ReactNative', () => {
</Text>,
11,
),
).toThrow('Text strings must be rendered within a <Text> component.');
).toErrorDev(['Text strings must be rendered within a <Text> component.']);
});
it('should not throw for text inside of an indirect <Text> ancestor', () => {