score:2
my final approach if it is useful for someone:
i followed @lucasoliveira approach but went a little bit further and this is what i did using ex-react-native-i18n but you can use whatever plugin you feel most comfortable with:
first i declared a helper method inside my component to return a single object with the complete translation
pass the translation object down to the "dummy" component
contaninercomponent.js
class containercomponent extends react.component {
...
// load translation outside context.
loadtranslation() {
return {
string1: i18n.t('key1'),
string2: i18n.t('key2'),
string3: i18n.t('key3')
}
}
...
render() {
return(
<myawesomecomponent
...props
translation={this.loadtranslation()}
/>
);
}
}
then, in the dummy component i set up a default translation, to fit the case in which the translation is not set and then i created a helper method to handle the possible not handled strings and avoid undefined values:
myawesomecomponent.js
const myawesomecomponent = ({ ..., translation }) => {
const strings = handletranslation(translation);
return (
.... some jsx here ....
);
};
const default_translation = {
string1: 'your default string',
string2: 'your default string',
string3: 'your default string'
}
const handletranslation = (translation) => {
if (translation === undefined) return default_translation;
return {
string1: (translation.string1 !== undefined) ?
translation.string1 : default_translation.string1;
string2: (translation.string2 !== undefined) ?
translation.string2 : default_translation.string2;
string3: (translation.string3 !== undefined) ?
translation.string3 : default_translation.string3;
}
};
and now the whole translation is safe to use from the "strings" variable.
hope it helps!
score:1
i would go for the second approach, cause the ability to define your object outside the component declaration, gonna make your component accepts an object, a string, a date, etc... allowing you to treat then later. doing that :
<myawesomecomponent
...props
translation={translation}
/>
means our code doesn't need to know that it is being rendered , as this will be your component responsibility
Source: stackoverflow.com
Related Query
- Localize React & React-Native components keeping them as reusable as possible
- Sharing React components between projects while keeping the source code in one of them
- How to concatenate JSX components in React Native
- having multiple instance of same reusable redux react components on the same page/route
- Space between components in React Native styling
- Passing Parameters to Components in React Native
- In React Native how can I test my components with Shallow Rendering?
- How do I make components in React Native without using JSX?
- How to use react j s components in react native app?
- React Native crashes after upgrade to version 0.56. Possible Babel issue?
- React Native - Animated Functional Components
- How to create custom React Native components with child nodes
- Creating 'Div' and 'Span' Components in React Native
- How to deal with React Native animated.timing in same child components
- React Native - useRef warning on function components
- React Native -- Possible to console.log in return()?
- React Native & Redux: Why aren't child components re-rendering on every state update?
- Is it possible to store React components in an array?
- React Native only for UI components
- Load react native components dynamically from a url
- Designing state for Reusable React Components and Browser history
- Keyboard changes all components placement in react native
- Communicate Between Components in React Native (child -> parent)
- React Native Extending Multiple Components vs createClass
- Trying to use GoogleSignIn in React Native then Possible Unhandled Promise Rejection (id: Error: DEVELOPER_ERROR
- React Native components name with point parameter
- Is it possible to limit children to specific components using React with TypeScript?
- Is it possible to reuse existing React components in ClojureScript Om app?
- Is It Possible to Style React Components After Creation?
- How should I test the composition of React components using HOCs (or should I even test them at all)?
More Query from same tag
- react state is one state behind button clicks
- How to convert HTMLElement to JSX.Element
- Next js : On back button click page content is not loading
- Retry with useMutation (React Query)
- Blinking Modal with Semantic UI React
- Unable to set div tag text dynamically on above of specific button
- react-modal Dynamic Sizing
- Encode PDF to base64 in ReactJS
- How to get and display specific data from onClick into another page in React
- React change state from child component not working
- How do I correctly use 'styled-components'?
- State set method did not effect the main object - ReactJS
- React: How to update state in an array requiring remote calls for each item?
- Formik: target is undefined when passing Material UI Date Picker as prop to React Component
- How to pass Props to reactjs handler?
- How to get the return value of a async function that returns a promise
- Set focus on input field of the form in controlled component
- How do I play audio from an array of objects in React.js
- How do I render Firebase Storage videos on a website?
- react-select clears my typed value when i lose focus or move on to next field
- Reusing state in React with Hooks
- ReactJS: filter images to map into carousel
- Screen is not scrolling Expo web
- React build multiple files
- Adjusting Tab Width in Material UI App Bar
- React Hooks must be called in a React function component or a custom React Hook function
- How to debug with breakpoints in React Native
- How to correctly type my react context provider?
- Did not expect server HTML to contain a <div> in <main>
- what is the use of arrow functions in reactJS?