reactjs - 如何在反应js中附加标签和样式，跨度方法

Question

每当调用套接字方法时，我想附加一个带有样式的标签和跨度方法，请帮助我提前感谢

socket.on('start_call', async (customerName, Id) =>{
// here i want to append the  customerName for label and Id for span  
}

标签： reactjs

Answer 1

我认为，您应该以这种方式应用（只是想法和简化版本，如果您在与代码集成时遇到任何困难，请告诉我）。

import React, { useState } from 'react';

const App = () => {
  const [customers, setCustomers] = useState([]);

  useEffect(() => {
    socket.on('start_call', async (name, id) => {
      setCustomers([...customers, { name, id }])
    }
  }, []) // Run once when component render, the same as `componentDidMount` on class base component

  return (
    <div>
      {customers.length > 0 && customers.map((customer) => {
        <label>{customer.name}</label>
        <span>{customer.id}</span>
      })}
    </div>
  )
}

export default App;