react教程，react四种方案循环渲染输出子组件

render() {
  const items = ["苏南大叔", "sunan大叔", "sunan"];
  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
      {result}
    </div>
  );
}

const App = () => {
  var list = (length) => {
    var res = [];
    for (var i = 0; i < length; i++) {
      res.push(<div key={i}>占位符2</div>)
    }
    return res
  }
  return (<>
    {list(2)}
  </>)
}
export default App

const App = () => {
  return (<>
    {Array.from({ length: 3 }).map((value, index) => {
      return (
        <p key={index}>占位符3</p>
      )
    })}
  </>)
}
export default App

const App = () => {
  return (<>
    {Array(3).fill("占位符4").map((value, index) => {
      return (
        <p key={index}>{value}</p>
      )
    })}
  </>)
}
export default App

const App = () => {
  const [on, setOn] = useState(false);
  const p = <p className={on ? "on" : "off"}>key不可变</p>;
  const lists = Array(3).fill(p);
  return (
    <div className="App">
      {lists}
    </div>
  );
}
export default App;

react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.