在反应组件中创建 HTML 标签

Question

我没有扩展组件类，尝试使用usestate 来管理状态。现在我想在方法togglePersonsHanler 内的personList 变量中添加特定条件下的人员组件。 我希望添加一个 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}

并且person标签没有被添加到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

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

<div>
  {personState.persons.map (person => (
    <Person name={person.name} age={person.age}/>
  )}
</div>

由于所有映射的元素都需要唯一键，因此要修复 react-key 警告，请添加一个 key prop，其值对于数组中的数据是唯一的，例如名称：

<div>
  {personState.persons.map (person => (
    <Person key={name} name={person.name} age={person.age}/>
  )}
</div>

正确切换“personList”的显示：

1. 如果showPersonsState 是true，则有条件地呈现映射的persons 数组
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>
  );
};