Good day. Question: let there be let foo = 123; and let bar = 'foo'; How do bar access foo content?

In particular, to be able to do this in React Native:

return ( <this.props.currentScreen /> );

when in this.props.currentScreen there is a line with the name of the component.

  • let obj = {}; obj.foo = 123; let bar = 'foo'; console.log(obj[bar]) /* 123 */ let obj = {}; obj.foo = 123; let bar = 'foo'; console.log(obj[bar]) /* 123 */ - Yaant
  • Thanks, it helps. Only instead of <obj [bar] /> you need React.createElement (obj [bar], null); - Egor Kokarev

1 answer 1

How do bar access foo content?

What does it mean? bar is a string, foo is a number.

In particular, to be able to do this in React Native:

return ( <this.props.currentScreen /> );

So you tried it?

 const { currentScreen } = this.props; return ( <div> { currentScreen } <div/> );

UPDATE 1

Try this option:

 import someComponent from './components/someComponent'; import anotherComponent from './components/anotherComponent'; const map = { someComponent: someComponent, anotherComponent: anotherComponent, } const Component = map[this.props.currentScreen]; const props = this.props.currentScreenProps; return <Component ...props />

UPDATE 2

Working example:

 class someComponent extends React.Component { render() { return ( <div> someComponent! {this.props.text} </div> ); } } class anotherComponent extends React.Component { render() { return ( <div> anotherComponent! {this.props.text} </div> ); } } class App extends React.Component { constructor(props) { super(props); } render() { const map = { someComponent: someComponent, anotherComponent: anotherComponent, } const Component = map[this.props.currentScreen]; const props = this.props.currentScreenProps; if (!Component) return null; return ( <Component {...props} /> ); } } // const currentScreen = 'someComponent'; const currentScreen = 'anotherComponent'; const props = { text: 'Hello World'}; ReactDOM.render( <App currentScreen={currentScreen} currentScreenProps={props} />, document.getElementById('root') ); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>

  • The fact is that after `` `const {currentScreen} = this.props; return (<div> {currentScreen} <div />); `` `will be a div with a string, but I need an instance of a class with a name that is stored in this string. The answer in the commentary to the question as a whole solves my problem, only in this case the JSX syntax cannot be used. - Egor Kokarev
  • So already clearer! Updated the answer. - Dan
  • Added an example below - Dan
  • Yes, the dictionary option works, no doubt. The only disadvantage is that it does not take into account the fact that the class names obviously coincide with the possible values ​​in props: const map = { someComponent: someComponent, anotherComponent: anotherComponent, } There is an obvious duplication in this place. The components are already connected at the beginning of the file, and we hammer them all into the dictionary with our hands. This is not a question of the correctness of the answer, this is a general conceptual remark. - Egor Kokarev
  • How else would you get rid of imports and find out which component to include? Alternatively, you can transfer the component itself through the props, it is also possible. - Dan