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

我试图将我的状态作为道具从component Locatione.js传递到Map.js，因此当我在Map.js中调用函数SendLocation时，道具是可用的

这是我的部件位置

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**
    );
  }
}

导出默认类位置扩展组件{
状态={
位置：空
};
componentDidMount（）{
这是。_getLocationAsync（）；
}
_getLocationAsync=async（）=>{
let location=await location.getCurrentPositionAsync（{}）；
this.setState（{location}）；
console.log（“记录此pls”，此.state）；//此处的状态记录正确
};
render（）{
返回(
//当在地图上使用这个道具时，我得到**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
      />
    );
  }
}

导出默认类映射扩展React.Component{
sendLocation（）{
console.log（“发送位置日志”，this.props）；//此处的props显示为null
}
render（）{
返回(
console.log（“hi”，this.props））}//此处的道具记录正确
/>
);
}
}

我也试着用这种方式传递道具，但没有效果

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)))}
      />
    );
  }
}

导出默认类映射扩展React.Component{
发送位置（海拔、经度）{
log（“发送位置日志”，this.props）；
}
render（）{
返回(
);
}
}

---

感谢您的帮助

正如您可以将常规值作为道具传递一样，您也可以从组件的状态获取数据，并将其作为任何子组件的道具传递下去。您只需要传递准确的值，对于类组件，还需要使用构造函数

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

`导出默认类位置扩展组件{
建造师（道具）{
超级（道具）；
此.state={
位置：空
};
}
render（）{
返回(
);
}
}`

您需要将该功能传递到

onPress

并使用箭头功能才能在

sendLocation

中使用该

class Map extends React.Component {

  sendLocation = () => {
    console.log('sending location log', this.props.locatione); // the props here appear as null
  };

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

类映射扩展了React.Component{
sendLocation=（）=>{
console.log（'sending location log'，this.props.locatione）；//此处的props显示为null
};
render（）{
返回(
);
}
}
这里有一个小问题：

        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);
  }

您正在正确地通过组件传递道具，但应该使用箭头函数和匿名函数

尝试：

导出默认类映射扩展React.Component{
发送位置=（高度、经度）=>{
log（“发送位置日志”，this.props）；
}
render（）{
返回(
此.sendLocation}
/>
);
}
}
为什么这样调用发送位置函数？它应该在每次代码呈现时触发？
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}
      />
    );
  }
}