So if it's silly question, please excuse me.
I'm using React Carousel Component (react-slick) for my project. What i want to achieve, inside this block i want to use my module "CarouselSlide".
<Slider {...settings}> //--> react-slick component tag
<CarouselSlide/> //--> my module
</Slider>
CarouselSlide is my react module shows single carousel slide.
Is it possible to use this way or do i have to edit "react-slick" component own source code ?
Depending on how you want to display the slides, the base react-slick my prove difficult since that component seems to display each sibling element in its own slide. The problem with using your own React component as a child for react-slick is that your component must return a single parent and there currently is no way of sending multiple sibling elements in your render function's return statement.
react-slick seems to want a setup like the following:
<Slider {...settings}>
<div>1</div>
<div>2</div>
</Slider>
Yet creating a component in React and returning
<div>1</div>
<div>2</div>
Would return an error since you need a single parent encapsulating the return statement.
Now instead if you had a more complicated component to define EACH slide you can then do something like:
<Slider {...settings}>
<MyComponent />
<MyComponent />
</Slider>
So it really boils down to how you use it. If you want to return the ENTIRE set of slides in a single component, you'll need to edit the base react-slick component to allow that.
Take a look at this jsFiddle and you can see the problem.
Yes it possible .You can components inside components.This is how react works
Related
I'm very confused learning react.
For example I have very simple react component
export default function Foo(){
return(
<div>
<div>some text</div>
</div>
)
}
And I want to add a child component:
export default function Foo(){
const Bar = ()=>{
return (
<input placeholder="some input"/>
)
}
return(
<div>
<div>some text</div>
</div>
)
}
And as much as I know, I can use this component in two ways:
1. Use as function
return(
<div>
<div>some text</div>
{Bar()}
</div>
)
2. use as component:
return(
<div>
<div>some text</div>
<Bar/>
</div>
)
What exactly different between these two? I thought it was same, until I faced an issue with input field, that if I use component as <Bar/>, The focus on input field will be lost after I enter first letter
Demo here: https://codesandbox.io/s/gifted-archimedes-l7bce7?file=/src/App.js
So what is the exact problem here? I code as component all the time, as per my understand <Bar/> is same as Bar() when it return react component
Am I right or not?
Edit: I found this blog, and it very close to this question and it great too :)
https://dev.to/igor_bykov/react-calling-functional-components-as-functions-1d3l?signin=true
To be a component, function returning JSX should be used as <Component /> and not as Component().
When a functional component is used as <Component /> it will have a lifecycle and can have a state.
When a function is called directly as Component() it will just run and (probably) return something. No lifecycle, no hooks, none of the React magic.
The above 3 statement is the answer to your probem.
When you call the component as {Child()}, it does not have any lifecycle or hook and when you call as , it has it's own lifecycle and hooks this is why you are facing those problems.
For more read on this topis: Link.
I have seen your codesand box demo,
form there I think that the reason for losing focus from input field is the place where you have used useState.
Your can do two things here that's:
Either
Pass the state as props from parent to child component.
Or
use useState inside your child component as the parent does not require the state value I prefer the second way.
You can Read this for more knowledge of where to put the useState and when do you really need to use useState.
When you create a new component you can re-use that in another functional component.Whereas, If you create function then you cannot re-use in another functional component, it will have limited access to that particular functional component only.
I'm building a tester page where the user sees a library component and documents its use.
Here is the component:
render = () => {
let component = (
<Slider
onSlide={this.handleSlide}
totalCount={120}
/>
);
return (
<div>
<h2>Slider Test:</h2>
{component}
<code>HOW TO PRINT COMPONENT CODE HERE?</code>
</div>
);
};
I want to show the component in use and at the end the code I've used to test it.
How can I put on screen the component code without the need to replicate it inside the tag?
Is there a way to do it directly or though an existing npm library?
You could escape the code and it should appear correctly.
You can use that library to do it escape-html npm
You should also be able to find specialized libraries to do it like this one react code view npm
I get the following warning when rendering my component:
Warning: A component is contentEditable and contains children
managed by React. It is now your responsibility to guarantee that none
of those nodes are unexpectedly modified or duplicated. This is
probably not intentional.
This is my component:
import React, { Component } from "react";
export default class Editable extends Component {
render() {
return (
<div contentEditable={true} onBlur={this.props.handleBlur}>
{this.props.children}
</div>
);
}
}
What is the potential problem with my code that React wants to warn me about? I did not quite understand from reading the documentation at https://reactjs.org/docs/dom-elements.html.
I imagine that my component should work exactly like an managed input field, without any problem:
this.props.children is initial value
the onBlur callback updates the props from event.target.innerHTML
the component is rendered with the new props
Setting the contenteditable html attribute allows the contents of that element to be modified in the browser. React is warning you that you have children within that element that are managed by React. React only works from the top down. Meaning it manages a model at the top level and maintains a virtual DOM representing that data, then renders the DOM tree based on that virtual DOM. Any changes you make to the DOM outside of React (such as setting contenteditable and allowing the content to be edited by a user directly in the browser) will be potentially blown away or cause problems for React when it goes to update those managed elements.
In your situation you don't care that the {this.props.children} node gets blown away because you know you're catching the changes and doing what you need to with it. It's just warning you that you better not expect that node to remain intact and accurately updated by React when you're letting the content be edited by the browser directly.
If you know what you're doing (and for now it looks like you do) then you can suppress that warning by adding suppressContentEditableWarning={true}.
Thanks #Chev! It fixed the warnings..
<p
className={editing ? 'editing' : ''}
onClick={editOnClick ? this.toggleEdit : undefined}
contentEditable={editing}
ref={(domNode) => {
this.domElm = domNode;
}}
onBlur={this.save}
onKeyDown={this.handleKeyDown}
{...this.props}
suppressContentEditableWarning={true}
>
{this.props.value}
</p>
Something that's always confused me is how many React examples show everything as components. But's let's say I only need to include some simple HTML alongside my components, like:
class Homepage extends Component {
render() {
return (
<Container>
<Hero />
<Features />
<div className="copyright">Copyright Some Company Name.</div>
</Container>
);
}
}
The div element will never be more than static text.
Should the <div> be moved into a pure component? Or is it ok to simplify the Homepage component by adding plain HTML this?
Sure it's ok. all in all it's HTML in the end. React components are set of html elements when you call the render function.
One rule of thumb i follow is: create a new component when you think a new responsibility is in order.
That div is a component just like any other, except it is a "primitive" one. There should be no problem mixing the primitive components from HTML with your own custom components.
I can't find any documentation for how this should be done with the <Navigator/> component... Basically, when one of my scenes loads, I want to be able to, say, pass a route.navBarColor to my navigator that will automatically change the background color of the bar.
I have tried pushing a route with {navBarColor: 'red'}, etc... to renderScene(), but this does not work because renderScene() doesn't seem to have a reference to this, and when I bind(this) it, the entire scene does not render, and throws a Stack Overflow error.
Basically, I want to do something like this:
navigator.push({name: 'TestScene', navBarColor: 'transparent'})
Which then goes to
renderScene(route, navigator) {
if(route.navBarColor) {
this.setState({navBarColor: navBarColor});
} ... etc.
}
Where this.state.navBarColor is used to set the backgroundColor prop of the navigationBar.
Is this possible with the Navigator component? I see that it appears to be with NavigatorIOS, so I don't understand why it wouldn't be here.
Thanks!
The Navigator component has no display of its own, it only manages the scene transitions and routing, so asking how to do this "with Navigator" is not right. This is contrasted with NavigatorIOS which dictates the display as well.
Your question mentions "NavigationBar", is that React Native Navbar?
If yes, somewhere in the renderScene() function there will be a reference to the component, you simply need to pass it the appropriate navBarColor prop.
<NavigationBar statusBar={{ tintColor: route.navBarColor }} />