代码之家 › 专栏 › 技术社区 › upog

在react组件中创建HTML标签

react-hooks reactjs javascript

upog · 技术社区 · 5 年前

我没有扩展组件类,试图使用 usestate 管理国家。现在,我想在某些条件下添加一个人员组件 personList 方法内部的变量 togglePersonsHanler . 我希望添加一个HTML标签列表,如下所示

<person name="person1" age=31>
<person name="person2" age=26>
<person name="person3" age=35>

但在控制台日志上,我得到了 人员列表 如下所示

{$$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;

1 回复 | 直到 5 年前

Drew Reese 5 年前

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

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

为了修复所有映射元素都需要唯一键的react键警告,请添加一个键道具,其值对于数组中的数据是唯一的,如name:

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

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

有条件地渲染映射 persons 数组if showPersonsState 是 true
简化 显示人员状态 状态仅为布尔值
使用功能状态更新正确切换 显示人员状态 从以前的状态

更新了组件代码

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