如何使布尔状态资源库可重用

Question

我目前有一个带有标题的页面：h1，h2，h3。我希望他们的文本可以由用户在点击时编辑，所以基本上标题将变成输入类型='text'，然后在用户完成在输入中输入他的值后恢复为标题。我使用 useReducer 钩子让这个功能运行得很好，我在其中调度与每个值相关的相应值。但是，我正在努力弄清楚如何使textIsEdit道具/布尔值在所有3个组件中可重用。让我用代码解释一下：

JSON数据：

{
"name":"Click to rename One",
"campaigntype": "Click to rename Two",
"description": "Click to rename Three",
}

保存 3 个标头的组件：

export default function MetaData() {
const [nameIsEditing, setNameEditing] = useState(false);
const [campaignIsEditing, setCampaignIsEditing] = useState(false);
const [descriptionIsEditing, setDescriptionIsEditing] = useState(false);
function toggleNameEdit(){
setNameEditing(!nameIsEditing);
}
function toggleCampaignEdit(){
setCampaignIsEditing(!campaignIsEditing);
}
function toggleDescriptionEdit(){
setDescriptionIsEditing(!descriptionIsEditing);
}
const initialState = jsonData;
const [metaData, dispatch] = useReducer(metaDataReducer, initialState);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const defaultMetaValue = metaData[e.target.name as keyof MetaState];
dispatch({ type: e.target.name, value: e.target.value === '' ? defaultMetaValue : e.target.value });
};
return (
<Grid className='menuItem' container direction='column'>
{nameIsEditing ?
<RenameInput name='name' textStyle='h3' onClickAway={toggleNameEdit} onSubmit={toggleNameEdit} adName={metaData.name} onChange={handleChange} />
:
<H1 onClick={toggleNameEdit}>{metaData.name}</H1>}
{campaignIsEditing ?
<RenameInput name='campaigntype' textStyle='subtitle2' onClickAway={toggleCampaignEdit} onSubmit={toggleCampaignEdit} campaignType={metaData.campaigntype} onChange={handleChange} />
:
<H2 onClick={toggleCampaignEdit}>{metaData.campaigntype}</H2>}
{descriptionIsEditing ?
<RenameInput paragraph textStyle='body2' name='description' onClickAway={toggleDescriptionEdit} onSubmit={toggleDescriptionEdit} adDescription={metaData.description} onChange={handleChange} />
:
<H3 onClick={toggleDescriptionEdit} className='meta-description'>{metaData.description}</H3>}
</Grid>);
}

减速器：

const metaDataReducer = (state: MetaState, action: ActionType) => {
if (action.type in state) {
return { ...state, [action.type]: action.value };
} else {
return state;
}
};

重命名输入：

const RenameInput = (props) => {
return (
<ClickAwayListener onClickAway={props.onClickAway}>
<form onSubmit={props.onSubmit}>
<TextInput
defaultValue={props.adName || props.adDescription || props.campaignType}
autoFocus
onChange={props.onChange}
multiline={props.paragraph}
textStyle={props.textStyle}
name={props.name}
/>
</form>
</ClickAwayListener>
);
};

在我的元数据组件上，我真的不喜欢这部分代码

const [nameIsEditing, setNameEditing] = useState(false);
const [campaignIsEditing, setCampaignIsEditing] = useState(false);
const [descriptionIsEditing, setDescriptionIsEditing] = useState(false);
function toggleNameEdit(){
setNameEditing(!nameIsEditing);
}
function toggleCampaignEdit(){
setCampaignIsEditing(!campaignIsEditing);
}
function toggleDescriptionEdit(){
setDescriptionIsEditing(!descriptionIsEditing);
}

我想让它在所有 3 个组件中重复使用，因为它实际上在做同样的事情。我需要一个函数来处理所有这 3 个，但我真的不确定在哪里或如何做到这一点？我是在减速器中执行此操作，还是如何将其转换为工厂功能？一定有比我用{nameIsEditing ? renameComponent : h1{campaignIsEditing ? renameComponent : h2{descriptionIsEditing ? renameComponent : h3做的方式更好的方法

Answer 1

您只需创建一个新组件EditableTitle。它将处理isEditing状态，并将执行呈现只读标题或RenameInput组件的逻辑。
为了处理标题之间的微小差异，您可以将道具发送给EditableTitle。例如，您可以发送一个component值来渲染h1、h2或您想要的任何其他组件。