Как я могу изменить этот код на компонент класса или функции? Примечание: я новичок, чтобы реагировать на родную

Question

// Change this to work the same way with class or function component
      const App = () => { 
      const [date, setDate] = useState(new Date(1598051730000));
      const [mode, setMode] = useState('date');
      const [show, setShow] = useState(false);

      const onChange = (event, selectedDate) =>
        const currentDate = selectedDate || date;
        setShow(Platform.OS === 'ios');
        setDate(currentDate);
      };

      const showMode = currentMode => {
        setShow(true);
        setMode(currentMode);
      };

      const showDatepicker = () => {
        showMode('date');
      };

      const showTimepicker = () => {
        showMode('time');
      };

      return (
        <View>
          <View>
            // display date picker
            <Button onPress={showDatepicker} title="Show date picker!" />
          </View>
          <View>
            // Display time picker
            <Button onPress={showTimepicker} title="Show time picker!" />
          </View>
          {show && (
            <DateTimePicker
              testID="dateTimePicker"
              timeZoneOffsetInMinutes={0}
              value={date}
              mode={mode}
              is24Hour={true}
              display="default"
              onChange={onChange}
            />
          )}
        </View>
      );
    };

    export default App;

, если я помещаю константные переменные в render () {...}, я получаю Invariant Violation: Invalid hook call. если я поставлю их перед render () {}, я получу неожиданный токен на 1-м констате вокруг '=', 'new' и скобок.

Answer 1

Вы написали функциональный компонент. Если по каким-то причинам вам придется использовать вместо этого синтаксис класса, то вы должны использовать старые функции управления состоянием компонентов класса, а не хуки.

Что-то вроде

class App extends React.PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      date: new Date(1598051730000),
      mod: "date",
      show: false,
    }
  }

  public onChange = (event, selectedDate) => {
    const currentDate = selectedDate || this.state.date;
    this.setState({
      show: Platform.OS === 'ios',
      date: currentDate,
    });
  };

  public showMode = currentMode => {
    this.setState({
      show: true,
      mode: currentMode,
    })
  };

  public showDatepicker = () => {
    this.setState({ mode: "date" });
  };

  public showTimepicker = () => {
    this.setState({ mode: "time" });
  };

  public render() {
    return (
      <View>
        <View>
          // display date picker
          <Button onPress={showDatepicker} title="Show date picker!" />
        </View>
        <View>
          // Display time picker
          <Button onPress={showTimepicker} title="Show time picker!" />
        </View>
        {show && (
          <DateTimePicker
            testID="dateTimePicker"
            timeZoneOffsetInMinutes={0}
            value={date}
            mode={mode}
            is24Hour={true}
            display="default"
            onChange={onChange}
          />
        )}
      </View>
    );
  }
}

Возможно, вам также придется свяжите эти функции в своем конструкторе, если вы хотите, чтобы они были членами класса. Я давно не писал компонент как класс.

this.showDatepicker = this.showDatepicker.bind(this);
...

PS: хуки и функциональные компоненты - это современный способ написания React, я бы сохранил то, что у вас уже есть.

Edit: кстати, вы можете немного уменьшить сложность вашего компонента, выразив некоторые из логических c как эффект.

  const showDatepicker = () => setMode('date');

  const showTimepicker = () => setMode('time');

  // Instead of showMode
 useEffect(() => {
    setShow(true);
  }, [mode]);

Answer 2

Вы не можете использовать const внутри класса компонента

class App extends React.Component {

  state = {
    date: new Date(1598051730000),
    mode: 'date',
    show: false
  }

  onChange = (event, selectedDate) => {
    const currentDate = selectedDate || this.state.date;
    this.setSate({
      show: Platform.OS === 'ios',
      date: currentDate
    })
  };

  showMode = currentMode => {
    this.setSate({
      show: true,
      mode: currentMode
    })
  };

  showDatepicker = () => {
    this.showMode('date');
  };

  showTimepicker = () => {
    this.showMode('time');
  };

  render() {
    return (
      <View>
        <View>
          <Button onPress={this.showDatepicker} title="Show date picker!" />
        </View>
        <View>
          <Button onPress={this.showTimepicker} title="Show time picker!" />
        </View>
        {
          show && (
            <DateTimePicker
              testID="dateTimePicker"
              timeZoneOffsetInMinutes={0}
              value={this.state.date}
              mode={this.state.mode}
              is24Hour={true}
              display="default"
              onChange={onChange}
            />
          )
        }
      </View >
    )
  }
};

export default App;