Suppose I've got comments list component with comments components. I wanna implement method that will return all comments components. I assigned to each comment component same ref:
<comments>
<comment ref="myComments" text="abc" />
<comment ref="myComments" text="efg" />
</comments>
I thought I can access all my components by this.refs.myComments but it doesn't work - it returns only last comment component.
What's the correct way to access all comment components?
There is no correct way to do that.
Your view is a representation of your data, so if you want the text for all comments, look at the data.
If you want to update the comments, update the data.
Pulling data out of the view, or manually manipulating the view defeats the purpose of react.
Related
I have a vue3 webapp that I use to edit some multi-pages documents.
All the pages are stored in a state with pinia. My pinia state is an object with a pages property that is an array containing all the data of each page.
Each page of each document use a specific template, so I created multiple components to handle each template, and I also have subcomponents for some parts that can be found across multiple templates.
I loop through the pages with a root component, passing a reference to the page object, like it :
<PageWrapper v-for="page in pages" :key="page.id" :page="page" />
Then, inside the PageWrapper component, I use the according page template's component, passing along a reference to the page object (the same with subcomponents if any) :
<PageFirst v-if="props.page.type === 'first'" :page="props.page" />
<PageServices v-if="props.page.type === 'services'" :page="props.page" />
<PageTotal v-if="props.page.type === 'total'" :page="props.page" />
<PageContent v-if="props.page.type === 'content'" :page="props.page" />
I wonder what would be the best way to edit a property of my page object from a subcomponent, as I know that it is a bad practice to mutate the property directly.
Do I have to use events ? Is PageWrapper the good place to catch all the events and the modifications?
Any advice on this matter would be of great help to me.
Thanks a lot for your help!
As the Vue official document point out:
In most cases, the child should emit an event to let the parent perform the mutation.
So the answer is you should let the parent do the job of mutating the props. And it will never be a bad solution.
But, look at your design. Your parent component PageWrapper works just like a wrapper. It does nothing but a container for its child.
The props one-way data flow prevents child components from accidentally mutating the parent's state, which can make your app's data flow harder to understand. But if the parent does not actually handle state and your child component's data does not relate with each other, mutating the props inside the child component will be fine.
I'm making a plugin that gets the actual panel or text selection and runs a command on the cli with that value and some params that the user adds in a input.
The idea is to have a similar view than find-and-replace package, but from the first beginning I wasn't able to use space-pane-views for a error on jQuery.
So I decided to make it with React and as far as I was making everything was okayish, but I found 2 big problems.
First I understand what's the View of space-pan and all the ShadowDOM that uses, I feel that is not compatible with React at all, is some kind of big Model that gets data from the dom and from some methods.
So I created a <input /> and I figuret out that you can't interact as normal as a website with that input, doesn't have the hability of delete normally the text and you can't use the atom-text-editor styles into it.
in another hand I try to create a Custom Web Component with React like:
<atom-text-editor
{...this.props}
mini
tabindex='-1'
class={`${this.props.className}`}
data-grammar='text plain null-grammar'
data-encoding='utf8'
/>
and it works with inheriting the styles, but I can't access to the content of the Shadow DOM, neither add eventHandlers like onChange (onKeyPress works btw), this is basically a problem more than React that Atom, but is as far as I went in the intention to create a View in Atom.
Another option could be add draft-js from Fb, but it's a crazy idea for create a simple input.
Any idea to solve one of both problems?
Thanks!
If you add a normal input in React with className='native-key-bindings' the input contains the nativew key bindings, and you can attach the eventHandlers there.
I would like to know what the best practice is for a communication between parent/child components. I have read this blogpost about communication and components states but haven't found the right answer for my problem.
Following components are considered.
My parent component is a List, which renders several Tasks (child component) from objects in the parent component.
So my questions are:
Is it best practice to pass the object to each Task component?
When a value has changed in the Task component, how does the parent component know about this? Because the parent should know about the infos of all children.
So is this a right pattern to use?
In my Parent Component I have this in the render function:
<Task key={index} taskdata={taskobj} />
My Task child component looks like this:
render() {
return (
<input type="text" name="wunsch" defaultValue={this.props.task.title}/>
);
}
So if the value of the input field will change, does taskobj in the parent component also change? In this example no. But what would be the right pattern here?
Basically when you want to pass information from parent to children you use props, when you want to pass information from child to parent you pass a function to a child as a prop and then call it when you need to update a parent.
You can read more in official docs
Also you can take a look Reflux.
A simple library for unidirectional dataflow architecture inspired by ReactJS Flux
In React, data flows one way
I wasn't really aware of this React concept.
So after reading this link in the ReactJS Doc I decided to the onChange/setState() way as ReactLink is already deprecated.
So when a change in the model happens in the child component I call a method in the parents component to update (setState) my data.
How to access componentlink field names in third level?
I have a schema which contains a field as embeddable schema, in that embeddable schema, I have a component link which is derived from another schema. How can i retrieve the field of that schema?
It really depends on the purpose of those field(s), perhaps you could provide some more information?
Another option not mentioned here is to write your own C# building block to add these 3rd level components to your package. By doing so you make it a lot simpler to work with them in your DWT layout.
For example if your third-level items are used to generate a list of office locations, you could write a C# block to obtain all the relevant office location components and add them to your package as a component list 'Locations' all you would simply need to do in your DWT is loop those items and provide the display you need.
Personally I don't like to use / add functions into DWT, I try to keep it as simple as possible, again if you can provide more information about your scenario that would generate a better answer for you from the community.
As far as I know, you need a special DWT TBB to get some control over your embedded/componentlinks. Maybe you could use Nuno's Get Extensions ? http://www.sdltridionworld.com/community/extension_overview/dreamweaver_get_extension.aspx
Or use Razor Mediator, perhaps:
http://www.sdltridionworld.com/community/2011_extensions/razormediator.aspx
To prevent having to use either the DGX (as MDa suggests) or write a C# TBB (as John Winter suggests), you can also simply call RenderComponentPresentation to render the linked Component with the template that you want to use.
<!-- TemplateBeginRepeat name="Component.Fields.LinkFieldName" -->
##RenderComponentPresentation(Field, "tcm:1-23-32")##
<!-- TemplateEndRepeat -->
Where tcm:1-23-32 it the TCM URI of a Component Template that simply renders the name of the Component as a hyperlink. Inside the DWT that you use in tcm:1-23-32 you can then simply refer to all fields and properties of the linked Component like Component.Title, Component.Fields.Field1, etc.
Note that the relevant topics have been covered already in these other questions/answers:
rendering the title of a linked component - Looping through the multiple component links to get the schema name of the linked component in Dreamweaver TBB in SDL Tridion 2011
getting values of a linked component - Retrieving values of a linked component in Dreamweaver TBB - and making it SiteEditable
handling nested embedded schemas - How to handle nested repeating regions in Dreamweaver TBBs in SDL Tridion 2011 SP1
If somehow these did not help you enough, I suggest you post the XML of your Component and the DWT that you're trying to make work.
Here a quick sample using C#
Session session = engine.GetSession();
Item componentItem = package.GetByName(Package.ComponentName);
Component component = new Component(new TcmUri(componentItem.GetValue("ID")), session);
ItemFields itemFields = new ItemFields(component.Content, component.Schema);
IEnumerable<ComponentLinkField> ie = itemFields.OfType<EmbeddedSchemaField>().OfType<ComponentLinkField>();
for (IEnumerator<ComponentLinkField> e = ie.GetEnumerator(); e.MoveNext(); ) {
Component linkedComponent = e.Current.Value;
}
By using Linq you can navigate through the fields structure really quick and get results. It will give you the Component Links in the third level, of course you can use the same to go deeper in the structure.
I have a checkbox in a component:
<s:CheckBox id="myCB_1" />
In my main.mxml I need to test for the state of the checkbox. I originally had all my code in main.mxml, but it was getting really long, and I thought that it was better practice to break my code into components. Also, I have other projects where the same concept will apply, so I really want to figure this out.
I have the following function :
private function checkAlarms(currentTime:Date):void
{
if (!breakfastAlarmSounded)
{
if ((currentTime.hours > breakfastTime.hours) || ((currentTime.hours == breakfastTime.hours) && (currentTime.minutes >= breakfastTime.minutes)))
{
if (myCB_1.selected)
{
playBreakfastAudioAlarm();
}
if (myCB_2.selected)
{
playBreakfastVisualAlarm();
}
breakfastAlarmSounded = true;
}
}
...
simply addressing the component, as in:
myComponent.myCB_1.selected
doesn't work. Someone mentioned that I need to create a variable in my component that refers to the id (myCB_1) of checkbox, but I don't really understand or know how to do that, and they didn't elaborate.
How do I test for the status of the CheckBox "myCB_1" in the component from within my main.mxml?
many thanks,
Mark
(newbie)
With very little information, I'm going to suspect you originally had the CheckBox included in main.mxml and moved it to a custom component. If so, you need to address the CheckBox's ID via the custom component's ID. Something like this (from main.mxml):
if(yourComponentsID.myCB_1.selected)
{
...
}
If this isn't the case, please edit your post and give us more detail.
EDIT
You said you created a new custom component and moved the CheckBox into it. Great, that's a helpful start :) When you included your new component in your main.mxml file, it should look something like this:
<component:YourNewComponent />
Of course, however you named it (and whichever namespace is used to reference it) will be different from my example, but the principle should still apply. In main.mxml, you need to give your custom component a unique ID string so you can reference it within main:
<component:YourNewComponent id="myComponent" />
From here on, you should be able to reference the component, and any public elements within it: myComponent.myCB_1.
It would be useful to provide more details about the context in which you're using this script. Nonetheless I'm going to throw out some information that may help.
In order for the script to access the component, it has to be within the scope of the component. Usually that means one of the following:
You have a <script> tag in the MXML, with code in it that references components within the same MXML file.
You have a <script source='external.as'/> tag in the MXML, where external.as is referencing components in the MXML file.
You are creating the component in your script and you have a definition for the component within ActionScript (ex. var myCB_1:CheckBox; is within the class definition).
If the script and the component aren't within the same scope then they can't see one another.
You need to refer to the checkbox through the component. Lets say that you use your component in your main like this:
<local:MyComponent id="myComponent" />
In your script, you want to refer to it:
if(myComponent.myCB_1.selected) { // do something }
Strangely enough, it works. I was getting a getting an 1119 error (Description 1119: Access of possibly undefined property myCB_1 through a reference with static type Class.) when I refer to the component with dot notation (myComponent.myCB_1.selected) and an 1120 error (Description 1120: Access of undefined property myCB_1) when not addressing it via myComponent.
With these errors I never thought to try running the thing. Long story short - it runs with or without addressing the component (???) go figure!
thanks for all the input and would love to hear any other comments.
MCE