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

【问题标题】：How to dynamically set prop names using react functional components如何使用反应功能组件动态设置道具名称
【发布时间】：2021-06-10 02:50:51
【问题描述】：

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

这是我的代码。下面是我希望能工作的伪代码。简而言之，我想动态设置一个道具名称，这样我就可以让 hoverTxt 设置函数参数，所以如果我将 1 传递给 handleStyles 函数，它将返回 props.hovertxt1 或者如果我将参数设置为 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;

【问题讨论】：

你的意思是像props[`hoverTxt${textNumber}`]？

标签： javascript reactjs jsx react-props react-functional-component

【解决方案1】：

Props 也是一个对象，你可以使用字符串来访问对象键，例如

const obj = { name: 'Gwen' };

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

在此基础上，您可以通过确切的方式访问您的道具名称

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

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

【讨论】：