I'm trying to make a "skip to content" link at the top of a page in my app. Basically I want to pass it an id and I want to set the focus to the component that has that id.
Normally I would use an anchor tag to create a link to a particular component on a page like so: link
But this doesn't work in react native and I've only seen ways to create links to other app pages or external web pages. Is there a way to have this anchor tag functionality through something like a link in react native?
I have tried playing around with Linking, history.push, and Link from react-router-dom but none of them work. I can place an tag and that technically works but I don't think it's great practice for react native and I can't style it properly.
Related
To be honest, I don't know what really causes the problem but will try to explain it.
In my react app, I have placed a Google Translate Widget (which is retired some years ago) to easily translate whole website in just a click. It works fine until I am clicking on a MODAL or some button that changes TAB without changing routes. I mean, when routing there is no problem but if new component renders in the same route (like it does in MODAL and TAB component), the app crashes and all I am getting is a blank page.
Images to make it clearer:
As it seems, Google translated page to French in homepage here is a different route and everything seems OK.
BUT when I click on Make a Reservation Button (which is the vertical one) or All Features button (which is the black one at the bottom), distressingly this is what I get:
A blank page. So, without using google-translate-widget all is working without a problem. But if the page is translated and user clicks on a button renders some component on the same route this happens. ANY solution suggestion or comment means so much to me.
Thank you.
I got the component which cause the insertBefore error inside span tag. It solved the issue.
I am working with a Dashboard that has a menu. Let's take the attached menu as an example (which is NOT mine, I took a snapshot from a video).
Could you give me an idea of how I can do so that when pressing an option from the side menu, the content on the right side changes. Should I create an html document for each possible option and reference it from an "a href tag" or is there some other way to do it? Preferably the solution or idea does not involve react, angular or vue.
If you are not using any of SPA (Single page Application) then you must have to go for multipage activities where you need href on each option given in your main menu.
I'm currently attempting to tab through some react components that I've (text inputs, checkboxes, radio buttons, etc) implemented (using material-ui). Something I've discovered is that tabbing through my components locally works as expected but as soon as I put it on the server, it skips through my checkboxes & radiobuttons (but tabbing to text inputs works fine).
The website that I'm displaying my react project on is built on backbone and I'm basically displaying an iframe with my react project inside that. Is it possible that this has some effect on a user's ability to tab through the components inside an iframe?
Thanks for your help!
With some help from above, I was able to figure out that when I render my react project inside the backbone project, some components such as my checkbox and radio buttons are wrapped inside a <span> tag and in order for it to be able to be tabbed I had to add the tagIndex attribute to it. Thanks everyone!
I went through laracasts vuejs tutorials few times, thenetninja on youtube and few others..
So I decided to change my website front into vue because of reactivity.
Like for toggles and other stuff. But there are also components which are very useful and cool but in my case it seems like they are mostly unneeded.
Every tutorial is about basic things but in my case where I have:
<component-a>
<component-b></component-b>
</component-a>
<component-c></component-c>
And inside <component-b> I click on button and with that I need to change something in <component-c>.
I don't know how to do this besides adding everything inside one component which is not the case because some things are not supposed to be rendered if user is not logged in:
<component-c>
#if(auth()->user())
<component-d></component-d>
#endif
<component-e></component-e>
</component-c>
And I can't use php inside .vue :D
So I leave everything as it is and make reactivity based on that without using components.
Is that bad?
If it is, how to alter component-d on some click inside component-b with using components?
(In my case, B is dropdown menu from topbar and D is tab section that changes on that dropdown menu item clicks)
If certain content must be hidden from the client you can't use vue and just keep using php and laravel blade's #if, but then "reactivity" can only take place on a full page load.
If the content must only be hidden visually, of can be retrieved via an API then you can use Vue directives like v-if, v-show and use javascript to show and hide components.
I'm building a single page application with React and Backbone and am trying to figure out best practices for handling navigation between content in the app. My app will have a sidebar with links, for example, to "photos" and "settings". The sidebar is always present, so upon clicking "settings" I want the settings component to be rendered without the entire page reloading. Slack is a great example of what I'm looking for, where clicking a different channel switches the conversation content, but does not reload the entire page.
I had a few ideas on how to implement this, but i'm not sure what's best:
Have a general react component (console.jsx) that accepts a urlparameter as a prop to determine which content (photos or settings) to render.
or 2. have a general react component and define a state variable that represents which content to render.
Any help would be greatly appreciated!
Have you heard about react router? Seems to be what you want.
react router