在反应组件中创建 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>&nbsp; {personState.persons.map (person => (&nbsp; &nbsp; <Person name={person.name} age={person.age}/>&nbsp; )}</div>并且要修复一个 react-key 警告，因为所有映射的元素都需要唯一的键，添加一个 key prop，其值对于数组中的数据是唯一的，比如 name：<div>&nbsp; {personState.persons.map (person => (&nbsp; &nbsp; <Person key={name} name={person.name} age={person.age}/>&nbsp; )}</div>要正确切换“personList”的显示：如果是，则有条件地渲染映射persons数组showPersonsStatetrue将状态简化showPersonsState为布尔值使用功能状态更新正确地showPersonsState从以前的状态切换更新了组件代码const App = props => {&nbsp; const [personState, setPersonState] = useState({&nbsp; &nbsp; persons: [&nbsp; &nbsp; &nbsp; { name: "person1", age: 31 },&nbsp; &nbsp; &nbsp; { name: "person2", age: 26 },&nbsp; &nbsp; &nbsp; { name: "person3", age: 25 }&nbsp; &nbsp; ],&nbsp; &nbsp; other: "some Other Value"&nbsp; });&nbsp; const [otherState, setOtherState] = useState({&nbsp; &nbsp; otherState: "some other value"&nbsp; });&nbsp; const [showPersonsState, setShowPersonsState] = useState(false);&nbsp; const togglePersonsHandler = () => setShowPersonsState(show => !show);&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <h1> HI, I'm the react app</h1>&nbsp; &nbsp; &nbsp; <button onClick={togglePersonsHandler}>Toggle Person</button>&nbsp; &nbsp; &nbsp; {showPersonsState &&&nbsp; &nbsp; &nbsp; &nbsp; personState.persons.map(({ age, name }) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Person key={`${name}`} name={name} age={age} />&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </div>&nbsp; );};