如何使用反应功能组件动态设置道具名称

Question

const handleStyle = () => {
           if (!props.hoverTxt) {
              return { display: "none" };
            } else {
              return {};
            }
          };    
          return (
            <div>
              <HeroAsideItems txt={props.hoverTxt} style={handleStyle()} />
            </div>
          );
        }
        
        export default HeroAsideCircles;

This is the code I have. below is the pseudocode I wish would work. In short I'd like to dynamically set a prop name so i can have hoverTxt set the function parameters so if i pass 1 to the handleStyles function it will return props.hovertxt1 or if I set parameter as 6

    const handleStyle = (tEXTnUMBER) => {
    if (!props.hoverTxt + tEXTnUMBER) {
      return { display: "none" };
    } else {
      return {};
    }
  };



  return (
    <div>
      <HeroAsideItems txt={props.hoverTxt5} style={handleStyle(5)} />
    </div>
  );
}

export default HeroAsideCircles;

Answer 1

Props is also an object and you can access the object key using string, for example

const obj = { name: 'Gwen' };

console.log(obj['name']);

Based on that, you can do the exact way to access your props name

const handleStyle = (numberTxt) => {
  if (!props[`hoverTxt${numberTxt}`]) {
    return { display: "none" };
  } else {
    return {};
  }
};    

return (
  <div>
    <HeroAsideItems txt={props.hoverTxt5} style={handleStyle(5)} />
  </div>
);