Question

我正在尝试将状态作为道具从组件Locatione.js传递到Map.js，因此当我在Map.js中调用功能SendLocation时，道具才可用。

这是我的位置Locatione

export default class Locatione extends Component {
  state = {
    location: null
  };

  componentDidMount() {
    this._getLocationAsync();
  }

  _getLocationAsync = async () => {
    let location = await Location.getCurrentPositionAsync({ });
    this.setState({ location });
    console.log("log this pls", this.state); // the state here logs correctly
  };

  render() {
    return (
      <Map locatione={this.state} /> // when accesing this props in Map, I'm getting **null**
    );
  }
}

这是我的Map.js组件

export default class Map extends React.Component {
  sendLocation() {
    console.log("sending location log", this.props); // the props here appear as null
  }

  render() {
    return (
      <Button
        title="Send Sonar"
        onPress={(this.sendLocation, () => console.log("hi", this.props))} //the props here log correctly
      />
    );
  }
}

我也试图以这种方式传递我的道具，但无济于事。

export default class Map extends React.Component {

  sendLocation(altitude, longitude) {
    console.log("sending location log", this.props);
  }

  render() {
    return (
      <Button
        title="Send Sonar"
        onPress={(this.sendLocation, (this.props)))}
      />
    );
  }
}

感谢您的帮助

Answer 1

就像您可以将常规值作为prop一样传递一样，您还可以从组件的状态中获取数据并将其作为其任何子组件的props向下传递。您只需要传递确切的值，对于类组件，还可以使用构造函数。

`export default class Location extends Component {
  constructor(props) {
    super(props);
    this.state = {
       location: null
    };
  }
  render() {
    return (
      <Map location={this.state.location} /> 
    );
  }
}`

Answer 2

您需要将函数传递给RewriteRule ^([0-9]+)$ view.php?iid=$1 [L]并使用箭头函数才能在onPress内部使用this。

sendLocation

Answer 3

这里有一个小问题：

        onPress={(this.sendLocation, () => console.log("hi", this.props))}

每次代码呈现或重新渲染按钮时，console.log都会触发，而不是在您单击按钮时触发。

如果要在调用函数后登录，请将onPress更改为：

        onPress={() => {
                 this.sendLocation()
                 console.log("hi", this.props)
                }}

另一个问题是您没有授予sendLocation函数对this的访问权限。

您有两种方法可以做到：

第一种方式：将其绑定到构造函数中。因此，您可以在Map.js内添加以下内容：

constructor(props){
   super(props);
   this.sendLocation.bind(this);
}

第二种方式：将sendLocation函数声明为箭头函数：

  sendLocation = () => {
    console.log("sending location log", this.props);
  }

Answer 4

您正在正确地通过各个组件传递道具，但是您应该使用箭头功能以及匿名函数。

尝试：

export default class Map extends React.Component {

  sendLocation = (altitude, longitude) => {
    console.log("sending location log", this.props);
  }

  render() {
    return (
      <Button
        title="Send Sonar"
        onPress={()=>this.sendLocation}
      />
    );
  }
}

如何正确将道具状态从一个组件传递到另一个组件？

4 个答案: