我将JSS样式放入自定义的React钩子中这不好吗？

问题描述

我一直在努力寻找一种方法来制作可靠的可重复使用的SearchBar组件。我试图为此制作一个组件。但是，此组件无法保持其自己的状态。这意味着您将有两次导入才能使用此搜索栏。像这样：

import React,{ useState } from 'react';
import SearchBar from './SearchBar';

const Parent = () => {
   const [value,setValue] = useState("");

   return (
      <div>
         <SearchBar ...use 'value' and 'setValue' somehow... blah blah... />
         {list.map((item) => ...render item if it matches 'value'...)}
      </div>

}

那很容易，但是我的脑袋就走了……我在互联网上发现了一个“ useInput”自定义钩子，该钩子使用传播语法将一些道具传递给“ input”标签……我决定看看有多远我可以接受这个。

事实证明，我们在项目中使用JSS，这是事情变得有些荒谬的时候。这是我的挂钩：

import { useState } from 'react';
import { createUseStyles } from 'react-jss';

// My gut tells my this is a really terrible thing to do! 
export const useSearchBar = () => {
    const [value,setValue] = useState('');
    const classes = useStyles();
    return {
        value,setValue,reset: () => setValue(""),bindSearchBar: {
            type: 'text',className: classes.searchBar,placeholder: 'Search',value,onChange: (event: {target: {value: string}}) => {
                setValue(event.target.value);
            }
        }
    };
};

const useStyles = createUseStyles({
    searchBar: {
        ...search bar styles...
    },});

最简单的实现如下：

import React form 'react';
import { useSearchBar } from '../hooks/useSearchBar';

const Component = () => {

   const { bindSearchBar,value } = useSearchBar();

   return <input {...bindSearchBar} />;

}

我需要一个列表，但我想你明白了。我有一种奇怪的感觉，我认为这有一个严重的错误。我敢肯定，现在我会爱上它，但是在6个月后，我会讨厌自己。谁能告诉我这里可能出什么问题或为什么这可能是不好的做法？还是您认为以这种方式使用钩子是可行的？

解决方法

在一个钩子中创建jss类没有错。 useStyles是一个挂钩，自定义挂钩的属性是在其中使用其他挂钩。

除此之外，这是一个性能提示。

def translate(phrase):
    translation = ""
    for letter in phrase:
        if letter.lower() in "aeiouy":
            if letter.upper():
                translation = translation + "G"
            else:
                translation = translation + "g"
        else:
            translation = translation + letter
    return translation
print(translate(input("Enter A Phrase to Translate: ")))