在反应组件中创建 HTML 标签

Question

我没有扩展组件类，试图用来usestate管理状态。现在我想在特定条件下将人员组件添加到personList方法内部的变量中togglePersonsHanler。我希望添加一个 HTML 标签列表，例如<person name="person1" age=31><person name="person2" age=26><person name="person3" age=35>但在控制台日志上，我得到personList如下{$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …}$$typeof: Symbol(react.element)type: "div"key: nullref: nullprops: {children: Array(3)}_owner: null_store: {validated: false}_self: null_source: {fileName: "D:\data\react\my-app\src\App.js", lineNumber: 72, columnNumber: 7}并且人员标签没有被添加到 DOM 中，请提供任何建议import React, { useState } from 'react';import './App.css';import Person from './Person/Person';const App = props => {      const [personState, setPersonState] = useState({    persons: [      {name: "person1", age:31},      {name: "person2", age:26},      {name: "person3", age:25}    ],    other: "some Other Value"  } );  const [otherState,setOtherState]=useState({otherState :'some other value'});  const [showPersonsState,setShowPersonsState]=useState({showPersons :false});    let personList=null;    const togglePersonsHanler =() =>{      personList=null;      setShowPersonsState(        {showPersons : !showPersonsState.showPersons}      )      console.log(showPersonsState.showPersons);      if(showPersonsState.showPersons){        personList=(      <div>{personState.persons.map (person =>{        return <person name={person.name} age={person.age}/>      }      )}</div>        );      }      console.log(personList);    }  return (    <div className="App">      <h1> HI, I'm the react app</h1>      <button       //onClick={switchNameHandler.bind(this,'Gopu Ravi')}       onClick={togglePersonsHanler}      style={style}> Toggle Person </button>      { personList }    </div>  );}export default App;

Answer 1

您通过将对象文字用作html 标记来映射它们。您可能打算使用导入的Person组件。

<div>

  {personState.persons.map (person => (

    <Person name={person.name} age={person.age}/>

  )}

</div>

并且要修复一个 react-key 警告，因为所有映射的元素都需要唯一的键，添加一个 key prop，其值对于数组中的数据是唯一的，比如 name：

<div>

  {personState.persons.map (person => (

    <Person key={name} name={person.name} age={person.age}/>

  )}

</div>

要正确切换“personList”的显示：

1. 如果是，则有条件地渲染映射persons数组showPersonsStatetrue

2. 将状态简化showPersonsState为布尔值

3. 使用功能状态更新正确地showPersonsState从以前的状态切换

更新了组件代码

const App = props => {

  const [personState, setPersonState] = useState({

    persons: [

      { name: "person1", age: 31 },

      { name: "person2", age: 26 },

      { name: "person3", age: 25 }

    ],

    other: "some Other Value"

  });

  const [otherState, setOtherState] = useState({

    otherState: "some other value"

  });

  const [showPersonsState, setShowPersonsState] = useState(false);

  const togglePersonsHandler = () => setShowPersonsState(show => !show);

  return (

    <div className="App">

      <h1> HI, I'm the react app</h1>

      <button onClick={togglePersonsHandler}>Toggle Person</button>

      {showPersonsState &&

        personState.persons.map(({ age, name }) => (

          <Person key={`${name}`} name={name} age={age} />

        ))}

    </div>

  );

};