如何從React JS中的另一個功能組件調用功能組件

Question

我必須從另一個功能組件中調用一個功能組件，所以如何在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;

我試圖在單擊EditIcon時調用或渲染TestFucntional組件，但未調用它。 那么我該如何調用組件？

謝謝。

Answer 1

您只需像往常一樣在jsx中將其用作組件。 你可以在這里看到

 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') ); 

Answer 2

從上面的對話中，我想您需要條件渲染，即在任何事件之后都想要渲染子組件。 為此，它應在父組件中保持狀態。 如果要使用功能性父組件，則可以使用鈎子。 或者，您也可以使用一些道具進行條件渲染。 請提供代碼段。

僅供參考： https : //reactjs.org/docs/conditional-rendering.html