[英]How to call functional component from another functionnal component in react js
I have to call a functional component from another functional component So how can I call child functional component from a functional component in react js. 我必须从另一个功能组件中调用一个功能组件,所以如何在react js中从一个功能组件中调用子功能组件。
import React from "react";
import TestFunctional from "./TestFucntional";
const TestListing = props => {
const { classes, theme } = props;
const handleClickTestOpen = () => {
return <TestFunctional />;
};
return (
<div>
<EditIcon
className={classes.icon}
onClick={handleClickTestOpen}
/>
</div>
);
};
export default TestListing;
I am trying to call or render TestFucntional component on EditIcon clicked but it is not called. 我试图在单击EditIcon时调用或渲染TestFucntional组件,但未调用它。 So How can I call component? 那么我该如何调用组件?
Thanks. 谢谢。
You just use it in your jsx as a component as usual. 您只需像往常一样在jsx中将其用作组件。 You can see here 你可以在这里看到
const ItemComponent = ({item}) => ( <li>{item.name}</li>) const Component1 = ({list}) => ( <div> MainComponent <ul> {list && list.map(item =><ItemComponent item={item} key={item.id}/>)} </ul> </div>) const list = [{ id: 1, name: 'aaa'}, { id: 2, name: 'bbb'}] ReactDOM.render( <Component1 list={list}/> , document.querySelector('.container') );
From the above conversation, I guess you want conditional rendering, ie after any event you want to render the child component. 从上面的对话中,我想您需要条件渲染,即在任何事件之后都想要渲染子组件。 To do so in the parent component, it should maintain a state. 为此,它应在父组件中保持状态。 If you want to use functional parent component, you can use hooks. 如果要使用功能性父组件,则可以使用钩子。 Or you can use some prop for the conditional rendering as well. 或者,您也可以使用一些道具进行条件渲染。 Please provide a code snippet. 请提供代码段。
This is for reference: https://reactjs.org/docs/conditional-rendering.html 仅供参考: https : //reactjs.org/docs/conditional-rendering.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.