使用其他类的状态

Question

我目前正在做一个学校项目。我有一个地图位置应用程序。但不知何故，我需要传递状态值坐标。但是我不能把它分享到下一堂课……有人可以帮我吗？

代码：

import React from 'react';
import '../style/card.css';
import '../js/functions/maps';
import Button from './button.js';
import { getLocation } from './functions/getLocation.js';
import './functions/maps';



class Mobile extends React.Component {
  state = {
    coordinates: {}
  };

  getLocationCoordinates = () => {
    getLocation((coordinates) => {
      this.setState({ coordinates });
      console.log(this.state.coordinates);
    });
  };

  functionCoordinatePrint = (index) => {
    return this.state.coordinates[index] ? this.state.coordinates[index] : Math.random() * 50 + 1;
  };

  render() {
    const { lat, lng } = this.state.coordinates;
    return (
      <div id={'location'} className={'card'}>
        <div className={'card-layout'}>
          <div className={'text-card'}>
            <h1>{this.props.header}</h1>
            {this.props.text !== '' && <p className={'max-width-70'}>{this.props.text}</p>}
            <div
              style={{
                color: 'var(--color-text)'
              }}
            >
              <input type="checkbox" id="conditions-read" />
              <a href="../pages/algemene-voorwaarden">Accepteer voorwaarden</a>
            </div>

            <Button function={this.getLocationCoordinates} text={'Allow Location'} />
            <p>{this.props.coordinaten}</p>
          </div>
          <div className={'mobile'}>
            <img src={this.props.device} className={'device'} alt={this.props.alt_image} />
            <div className={'overlay'}>
              <div id={'location-maps'}>
                <iframe
                  title="map"
                  frameBorder="0"
                  scrolling="no"
                  marginHeight="0"
                  marginWidth="0"
                  src={`https://www.mapquest.com/near-${this.functionCoordinatePrint(
                    'latitude'
                  )},${this.functionCoordinatePrint('longitude')}?zoom=3`}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
  coordinatesToArray = coordinatesToArray[
    (this.functionCoordinatePrint('latitude'), this.functionCoordinatePrint('longitude'))
  ];
}

class Laptop extends React.Component {
  render() {
    return (
      <div id={'recommendations'} className={'card'}>
        <div className={'card-layout'}>
          <h1>{this.props.header}</h1>

          <div className={'laptop'}>
            <img
              style={{
                width: '150%'
              }}
              src={this.props.device}
              alt={this.props.alt}
            />
            <div className={'overlay-laptop'}>
              <div className={'maps'}>
                <iframe
                  title="mapExample"
                  frameBorder="0"
                  scrolling="no"
                  marginHeight="0"
                  marginWidth="0"
                  src={
                    'https://www.mapquest.com/near-' +
                    (this.props.lat ? this.props.lat : Math.random() * 30 + 1) +
                    ',' +
                    (this.props.long ? this.props.long : Math.random() * 30 + 1) +
                    '?zoom=3'
                  }
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export { Mobile, Laptop };

我尝试使用 props.state.coordinates[0]，我还使用了全局变量，并在函数 GetLocation() 中设置了值，然后将其用于我的笔记本电脑版本。但是有人可以帮助我吗？

提前致谢。

Answer 1

1. 首先将移动设备和笔记本电脑这两个组件分离到单独的文件中。他们有自己的状态要管理，这样做，您的代码将更易于管理。 那么
2. 将Laptop 组件导入mobile 组件。

3. 将数据传递到笔记本电脑组件，例如， <Laptop data={this.state.coordinates}/>

4. 在您的笔记本电脑组件中获取此信息， this.props.data

Answer 2

最简单的方法是通过 props 将数据向下传递。如果笔记本电脑和手机是兄弟姐妹，那么您需要将状态“提升”到一个公共父组件，然后您可以在那里管理状态并使用道具将其传递给每个孩子，例如

<Mobile myState={myStateVariable} /> <Laptop myState={myStateVariable} />

Answer 3

在这种情况下可能对您有所帮助的是Higher Order Component，或简称为 HOC。您可以将 HOC 视为可以存储坐标的父组件。子组件（在您的情况下为移动设备和笔记本电脑）可以设置和访问 HOC 中的数据，从而允许子组件呈现坐标。

让我们更详细地澄清这一点。首先，您需要创建一个将坐标保持在其状态的 HOC 组件。 HOC 应该有一个 setter，需要作为属性传递给子组件。坐标的值也应该传递给子组件，我们可以使用spread operator。

const withCoordinates = (WrappedComponent) => {
    class WithCoordinates extends Component {
        constructor(props) {
            super(props);
            this.state = {
              coordinates: [],
            };
          }

          setCoordinates = (event) => {
            const { name, value } = e.target;
            this.setState({ [name]: value });    
          }

          render() {
              return (
                    <WrappedComponent
                      setCoordinates={(coordinates) => this.setCoordinates(coordinates)}
                      {...this.state}
                    />
              );
          }
    }

    return WithCoordinates;
}

export default withCoordinates;

接下来，我们需要连接子组件，以便它可以访问 HOC 定义的值。由于我们通过属性传递了coordinates 值和setCoordinates 方法，因此我们可以在子组件中访问它们。

class Laptop extends Component {
    render() {
        const { setCoordinates, coordinates } = this.props;

        return (
            <>
                <input name='coordinates' value={coordinates || ''} onChange={(e) => setCoordinates(e)} />
                <p>The coordinates are {coordinates}</p>
            </>
        );
    }
}

export default WithCoordinates(Laptop);

请注意，子组件与包裹在其周围的WithCoordinates 组件一起导出。这使得子组件可以访问 HOC 中的值。子组件中输入字段的名称对应于 HOC 中设置的状态值。

不要忘记使用Proptypes library 验证道具。