Блог

Главная - Вопросы по программированию - Как динамически задавать имена реквизитов с помощью функциональных компонентов react

Как динамически задавать имена реквизитов с помощью функциональных компонентов react

#javascript #reactjs #jsx #react-props #react-functional-component

Вопрос:

 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;

Комментарии:

1. Ты имеешь в виду, как props[`hoverTxt${textNumber}`] ?

Ответ №1:

Реквизит также является объектом, и вы можете получить доступ к ключу объекта с помощью строки, например

 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>
);
Метки: