时间戳

首页 > 解决方案 > 如何在基于 React 函数的组件中动态显示人物

javascript - 如何在基于 React 函数的组件中动态显示人物

问题描述

我正在使用函数组件而不是基于类的组件。所以我想在单击按钮时动态显示人员数据

const App = props =>{
   const [showPersons, setShowPersons] = useState({
        showPersons : false,
   })
   const togglePersonsHandler = () => {
        let temp = showPersons.showPersons;
        setShowPersons({showPersons : !temp});
   }

没有render()方法。所以基于功能的组件没有呈现if条件。

    let persons = null;
    if(showPersons.showPersons){
      persons = (
       <div>
          <Person name={personsState.persons[0].name} location={personsState.persons[0].location} />
          <Person name={personsState.persons[1].name} location={personsState.persons[1].location} 
            click={() => swichNameHandler('Nagi')} changed={nameChangeHandler}>his job is internet business
          </Person>
          <Person name={personsState.persons[2].name} location={personsState.persons[2].location}/>   
      </div>
    )
  }
  return(
    <div className="App">
        <h1>Hello there, this is nagasai </h1>
        <button style={inlineStyles} 
        onClick={togglePersonsHandler}>Toggle Persons
        </button>
        {person}
    </div>
  )
}
export default App;

任何人都可以帮助我。

标签： javascriptreactjsreact-component

解决方案

仅使用条件

<div>
  {showPersons.showPersons &&
    <div>
      <Person ... />
      <Person ... />
    </div>
  }
</div>

推荐阅读