Блог

Я создаю приложение с использованием React и Electron-JS. Я использую form для отображения некоторой информации. К этому form стилю применяется как style={{ overflow: 'scroll', height: '45vh' }} . Когда элементы формы переполняются, к ним добавляется полоса прокрутки. Но проблема в том, что при прокрутке вниз элементы, которые были скрыты до этого, не будут отображаться полностью. Но при изменении размера экрана они снова становятся видимыми. Это происходит примерно раз в 10 раз. Я не могу воспроизвести это всегда.

Я думаю, что React не отображает элементы, которые не видны на видимом экране, для повышения производительности.

Ниже приведен код для компонента формы:

 const style = { margin: '5px', height: '3.3vh', labelAlign: 'left' };

const inputStyle = { padding: '3px', height: '26px' };

export const ObjectPane = React.memo(({ objDetails }) => (
  <Form
   
    fields={Object.keys(objDetails).map(key => {
      let value = null;

      if (objDetails[key] === undefined) value = 'NA';
      else if (objDetails[key] === null) value = 'No Value';
      else value = objDetails[key];
      return {
        name: [`${key}`],
        value
      };
    })}
    style={{ overflow: 'scroll', height: '45vh' }}
    onScroll={() => {}}
  >
    <Form.Item label="Object" name="obj" style={style}>
      <Input style={inputStyle} disabled />
    </Form.Item>
    <Form.Item label="Object Id" name="objId" style={style}>
      <Input style={inputStyle} disabled />
    </Form.Item>
    <Form.Item label="Distance Long. [m] " name="longitude" style={style}>
      <Input style={inputStyle} disabled />
    </Form.Item>
    <Form.Item label="Distance Lat. [m] " name="lateral" style={style}>
      <Input style={inputStyle} disabled />
    </Form.Item>
    <Form.Item label="Velocity Long. [m/s]" name="vel_long" style={style}>
      <Input style={inputStyle} disabled />
    </Form.Item>
    <Form.Item label="Velocity Lat. [m/s]" name="vel_lat" style={style}>
      <Input style={inputStyle} disabled />
    </Form.Item>
    <Form.Item label="2 Wheeler Confidence" name="conf_twowheel" style={style}>
      <Input style={inputStyle} disabled />
    </Form.Item>
    <Form.Item label="4 Wheeler Confidence" name="conf_fourwheel" style={style}>
      <Input style={inputStyle} disabled />
    </Form.Item>
    <Form.Item
      label="Pedestrian Confidence"
      name="conf_pedestrian"
      style={style}
    >
      <Input style={inputStyle} disabled />
    </Form.Item>
    <Form.Item
      label="Stationary Confidence"
      name="conf_stationary"
      style={style}
    >
      <Input style={inputStyle} disabled />
    </Form.Item>
    <Form.Item label="Object Type" name="obj_type" style={style}>
      <Input style={inputStyle} disabled />
    </Form.Item>
    <Form.Item label="Type Confidence" name="conf_obj" style={style}>
      <Input style={inputStyle} disabled />
    </Form.Item>

    <Form.Item label="long_cu_aeb" name="long_cu_aeb" style={style}>
      <Input style={inputStyle} disabled />
    </Form.Item>

    <Form.Item label="cross_vru_aeb" name="cross_vru_aeb" style={style}>
      <Input style={inputStyle} disabled />
    </Form.Item>

    <Form.Item label="long_cu_fcw" name="long_cu_fcw" style={style}>
      <Input style={inputStyle} disabled />
    </Form.Item>

    <Form.Item label="cross_vru_fcw" name="cross_vru_fcw" style={style}>
      <Input style={inputStyle} disabled />
    </Form.Item>

    <Form.Item label="cyc_ped_tipl" name="cyc_ped_tipl" style={style}>
      <Input style={inputStyle} disabled />
    </Form.Item>
  </Form>
));
 

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