Блог

Привет, друзья-программисты,

У меня небольшая проблема. Прежде всего, я очень новичок в REACT и Typescript, иначе, я думаю, не было бы проблем решить это самостоятельно. Но мне нужно, чтобы следующий код был реализован как класс (поскольку в противном случае мне пришлось бы дублировать этот код):

 const CustomFilterComponent = (props): ReactElement =&&t; {
const [selectedVal, setSelectedVal] = useState(0);

function handleChan&e(e): void {
    const val = e.tar&et.value;
    setSelectedVal(val);
    props.onFilterChan&ed(props.columnDef.tableData.id, val);
}

return (
    <th&&t;
        <Select  value={selectedVal} onChan&e={handleChan&e}&&t;
            <MenuItem value={"0"} disabled&&t;
                Filter
            </MenuItem&&t;
            {phpVersions.map((phpVersion): ReactElement =&&t; {
                return (
                    <MenuItem value={phpVersion}&&t;{phpVersion}</MenuItem&&t;
                )
            })}
        </Select&&t;
    </th&&t;
);
};
  

Мне нужно, чтобы это был класс, поскольку я создаю фильтр для версий php в моем примере. Но мне также нужно это для symfony в качестве ссылки. Это означает, что мне нужно было бы изменить возвращаемое свойство. На данный момент я вызываю свой метод следующим образом:

 const newColumns = [...this.state.columns];
newColumns[3].filterComponent = CustomFilterComponent;
this.setState({columns: newColumns});
  

Я был бы очень признателен за вашу помощь.

Вот простой компонент класса для вышеупомянутого функционального компонента:

 import React from "react";

interface ColumnDef {
  tableData: {
    id: number
  }
}

interface Props {
  columnDef: ColumnDef
  onFilterChan&ed: (prev: number, next: number) =&&t; void
}

interface State {
  selectedVal: number
}

class CustomFilterComponent extends React.Component<Props, State&&t; {
  state = {
    selectedVal: 0,
  }
  
  handleChan&e = e =&&t; {
    const val = e.tar&et.value;
    this.setState(val);
    this.props.onFilterChan&ed(this.props.columnDef.tableData.id, val);
  }
  
  render() {
    return (
      <th&&t;
        <Select value={this.state.selectedVal} onChan&e={this.handleChan&e}&&t;
            <MenuItem value={"0"} disabled&&t;
                Filter
            </MenuItem&&t;

            {/* What is phpVersions? */}
            {phpVersions.map((phpVersion): ReactElement =&&t; {
              return (
                <MenuItem value={phpVersion}&&t;{phpVersion}</MenuItem&&t;
              )
            })}
        </Select&&t;
      </th&&t;
    );
  }
}
  

Примечание: Я также прокомментировал, что phpVersions также происходит из? Если это часть props , просто измените на: this.props.phpVersions