Reactjs 返回功能组件中的组件 从“React”导入React； 从“/components/HeroAsideItems”导入HeroAsideItems； 导入“/css/heroAsideCircles.css”； 分圈功能（道具）{ const renderHeroAsideItems=（）=>{ //使用object.keys（道具）将道具对象转换为其关键点数组 //然后映射/循环Object.keys返回的键数组 //参数“keys”保存和数组中的键，“i”保存数组的索引，因此它是iterable。数组中从0开始的每个键的值都会增加。 Object.keys（props.map）（（keys，i）=>{ //测试有效的道具输入。我希望所有有效的道具都遵循`hoverTxt${someNumber}的命名约定` //validPropCount接受map传递的键参数（该参数保存数组中prop对象的键），并检查它是否包含`hoverTxt${和数组中条目数内的某个数字}` //如果validPropCount包含这些值，则返回true；如果不包含这些值，则返回false const validPropCount=keys.includes（`hoverTxt${i+1}`）； //如果validPropCount返回true，则返回并将循环中传递的当前prop值分配给组件的hoverTxt（它负责组件的文本） 如果（有效的优先计数）{ 控制台日志（“有效”）； console.log（Object.values（props）[i]）； 返回； //否则，如果validPropCount返回false，则不要返回组件 }否则{ 控制台日志（“无效”）； } }); }; 返回( {renderHeroAsideItems（）} ); } 导出默认的分圈；

我试图返回RenderRoaSideItems函数中的组件。这就是我试图做的，但它不起作用。正确的语法是什么

您没有返回

Object.keys（props）.map（（keys，i）=>{}）的结果

它应该是

返回对象.keys（props）.map（（keys，i）=>{}）

返回对象.keys（props）.map（（keys，i）=>{

->

返回对象.keys（props）.map（（keys，i）=>{

atm renderhoasideitems（）返回未定义的

import React from "react";
import HeroAsideItems from "./components/HeroAsideItems";
import "./css/heroAsideCircles.css";

function HeroAsideCircles(props) {
 
  const renderHeroAsideItems = () => {
    // Turn the prop object into an array of its keys using Object.keys(props)
    //Then map/loop over the array of keys returned by Object.keys
    //The argument "keys" holds and array of keys and "i" hold the index of the array so it is the iterable. It will increase for every key in the array starting at 0.
    Object.keys(props).map((keys, i) => {
      // Test for valid prop inputs. I want all valid props to follow the naming convention of `hoverTxt${someNumber}`
      // validPropCount takes the key argument passed by map (which holds the keys of the prop object in an array) and checks to see if it includes `hoverTxt${and some number within the amount of entries in the array}`
      // validPropCount will return true if it includes those values or false if it does not
      const validPropCount = keys.includes(`hoverTxt${i + 1}`);
      //If validPropCount returns true return and assign the <HeroAsideItems /> component the current prop value being passed in the loop to the component's hoverTxt (which is responsible for the text of the component)
      if (validPropCount) {
        console.log("valid");
        console.log(Object.values(props)[i]);
        return <HeroAsideItems key={i} hoverTxt={Object.values(props)[i]} />;
        // else if validPropCount returns false do not return a component
      } else {
        console.log("not valid");
      }
    });
  };

  return (
    <div className="hACContainer">
      {renderHeroAsideItems()}
    </div>
  );
}

export default HeroAsideCircles;