useState

/**
 * type :状态
 * editable(可以编辑) span onclick
 * editing(正在编辑) input onchange save
 * uneditable(不可以编辑 ) chirdren
 */
const useEditing = (initialState) => {
    const [editing, setEditing] = useState(initialState);
    const changeEditing = () => setEditing(!editing);
    return [editing, changeEditing];
};

const EditCell = (props) => {
    const [editing, changeEditing] = useEditing(false);
    const { editable, ...resProps } = props;

    const renderEditable = <span onClick={changeEditing}>renderEditable</span>;
    const renderEditing = (<Input {...props} />);
    const renderUneditable = resProps.chirdren;

    let rendered;
    if (!editable) {
        rendered = renderUneditable;
    } else if (editing) {
        rendered = renderEditing;
    } else {
        rendered = renderEditable;
    }
    return rendered;
};

有时间继续写