The example on the main Alt page shows how to connect a single store to a React component using #connectToStores.
I wonder if we can still use #connectToStores to connect 2 stores to a React component. I suppose the getStores method will be like this:
static getStores() {
return [TodoStore, TodoStore2];
}
but I don't know how the getPropsFromStores should be.
This question is answered here
https://github.com/goatslacker/alt/issues/420
If you want to connect 2 stores together for one component, wrap your component in an AltContainer and then reference the props the AltContainer passes to your component.
Related
Let's say I'm building out a <TextInput /> component.
I have 3 variations. In variation #1, the label is above the textinput; in #2 the label is the placeholder and moves up when clicked; in #3 it's inside the input above the placeholder.
Question1: Performance wise, which method of having the 3 variations is faster in terms of load times in the UI - putting it all in one component with conditional rendering in the JSX everywhere and having a prop to toggle between the three variations, or having 3 totally separate components and then importing a TextInput object and calling a specific variation in this fashion <TextInput.VariationA />?
Question2: Does importing the full TextInput object somehow lag the component instead of just importing VariationA by itself? Say for example if there are 1000 components inside the main import (like when importing Icons).
// This TextInput has TextInput.VariationA
// TextInput.VariationB and TextInput.VariationC
import TextInput from "myCustomTextInput"
// vs
import { VariationA } from "myCustomTextInput"
I don't think performance is going to problem, but I suppose you would handle it three different class with one component. You can give classnames via props where form component is used. And three different css styling will probably works.
I haven't try it before but I think it might works.
Sorry for the noob question in advance. I have got a button, and I have a function in a different folder which I am trying to execute... I have tried to import the function from my other folder however it does not seem to be exceuting...How do I call this correctly?
ModalTopBar.js
import LineageContent from '../../ReusableComponents/Lineage/LineageContent'
<Button text='Get SQL' onClick={LineageContent.onHandle} />
LineageContent:
const onHandle = () => {
console.log('clicked')
}
File path to where I am importing lineage content if it helps:
First of all lets clear that the Components in reactjs is reusable so you can't simply import a new instance then use a nested function from this component
if the Component that you want to use a nested function is parent or even ancestor to the current component then you should props and pass the function address throw it
else you should use something like redux and save this function address in a store then use wherever you want this is a bad practice to use redux
i tried to update the sound array which i imported from other component every time it is changed. But however, it only fire componentDidMount() only once and it won't run again. Down below is my code on the problem:
//sound array from another component
import { soundArray } from "./CreateRecord";
export default class RecordingList extends React.Component {
constructor() {
super();
this.currentSoundArray = [];
}
componentDidMount() {
console.log(this.currentSoundArray);
this.getCurrentArray();
}
getCurrentArray() {
this.currentSoundArray = soundArray;
}
render(){
...
}
currently when i view the component, the componentDidMound will run once and console the sound array. At first, the sound array is empty:
[]
However, after i put value in the sound array and comeback to view the component, it wont print the console and it won't update the value of this.currentSoundArray
My expected result should be the currentSoundArray will be changed and print to the console every time the soundArray has been changed in another component. for example:
[]
[1,2]
[1,2,4]
componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.
It runs only once.
What you are trying to do is access currentSoundArray value when it is updated from another component, now that you will not be able to do traditionally.
Also componentDidMount fires only once when the component is first initialized and rendered.
Solution 1
A better way of doing this is using something like React Redux to manage your application state, this way you would be able to access the states from any component throughout your application.
I have just finished setting up a boiler plate template for this exact thing, if you would like to check it out its on Github :)
Solution 2
If you are not interested in Redux then i would suggest you use react context for this, it will solve your issue as well. you can check out many examples online for example this uses context to share a snackbar across components.
Hope this Helps!
I'm trying to create a changeLanguage feature for my React Website. When a language ("English" or "Spanish") is selected it is passed down to all components in a props.language . When these props are received I want my components to print out text in the language indicated by the props. I have written the text in the state of the component one in Spanish and another in English. When my component renders I want it to print the right state according to what props are passed down. Any help?
You've messed up the syntax. Use this: <h4>{ this.state[this.props.language].title }</h4>
If you have multiple languages, send an object as your variable for every entity you wish to translate before hand. For example your page title may be
let greeting = {"English":"Hello","Spanish":"Hola"}
Then inside your render, you would have:
<div className="title">{this.state[this.props.language].greeting}</div>
I have some code that may render a component:
ReactDOM.render(myComponent, domNode)
whether or not this is called depends on a user action.
Later I want to detect if myComponent was indeed rendered and if so remove it. Currently I am doing:
if domNode.childNodes.length > 0
ReactDOM.unmountComponentAtNode(domNode)
What would be the React way of testing for a component existing in the tree? (Without using TestUtils).
Assign a ref to myComponent
<myComponent ref="sapyC" />
if !domNode.refs.sapyC
ReactDOM.unmountComponentAtNode(domNode)