Reactjs 如何根据我所在的组件更新查询参数？

我将参数传递给我的链接，我可以使用

this.props.location

从父组件访问它，但我也在该父组件中呈现其他组件，当我尝试在子组件中执行

this.props.location

时，它无法识别该.props.location是什么。我想弄清楚的是1。如何访问子组件中的查询参数，以及2。如何根据我所在的组件更新查询参数。i、 e.link=www.example.com/profile？name=“Jane Doe”&age=“21”我有两个子组件，name和age，当我更新name以表示Bob时，路由应更新为www.example.com/profile？name=“Bob”&age=“21”，对于age也是如此

推出新路线：

browserHistory.push({
  pathname: '/me',
  query: {name: "Jane Doe", age: "21"}
});

父组件（me.jsx）

导出默认类Me扩展组件{
render（）{
console.log（this.props.location.query）；//打印我的查询参数
返回(
);
}
}

Name.jsx

export default class Name extends Component {
      render() {
        console.log(this.props.location.query); //error
        return (
           <div>
             <form>
               field to update name, need to change url query param "Name" to reflect the change
             </form>     
           </div>
        );
      }
    }

导出默认类名扩展组件{
render（）{
console.log（this.props.location.query）；//错误
返回(
字段要更新名称，需要更改url查询参数“name”以反映更改
);
}
}

您需要将道具传递给孩子

export default class Me extends Component {
  render() {
    console.log(this.props.location.query); //prints my query parameters
    return (
       <div>
         <Name {...this.props} />
         <Age {...this.props} />         
       </div>
    );
  }
}

这会将所有道具从家长传递给孩子

export default class Me extends Component {
  render() {
    console.log(this.props.location.query); //prints my query parameters
    return (
       <div>
         <Name {...this.props} />
         <Age {...this.props} />         
       </div>
    );
  }
}

导出默认类Me扩展组件{
render（）{
console.log（this.props.location.query）；//打印我的查询参数
返回(
);
}
}

你也可以有选择地传递道具

export default class Me extends Component {
  render() {
    console.log(this.props.location.query); //prints my query parameters
    return (
       <div>
         <Name location={this.props.location} />
         <Age />         
       </div>
    );
  }
}

导出默认类Me扩展组件{
render（）{
console.log（this.props.location.query）；//打印我的查询参数
返回(
);
}
}

您的两个问题的答案：

此.props.location

只能在父组件中访问，因为只有该组件从路由器接收它作为props。如果希望在子组件中访问它们，则需要显式地将其传递给它们

父组件（me.jsx）

导出默认类Me扩展组件{
render（）{
log（this.props.location.query）；
返回(
);
}
}

Name.jsx

export default class Name extends Component {
  render() {
    console.log(this.props.query);
    return (
       <div>
         <form>

         </form>     
       </div>
    );
  }
}

export default class Name extends Component {
  constructor(props) {
    super(props);
    this.updateNameInUrl = this.updateNameInUrl.bind(this);
  }

  updateNameInUrl (event) {
    let newName = event.target.value;
    browserHistory.push("/me", {name: newName, age: this.props.query.age};
  }

  render() {
    console.log(this.props.query);
    return (
       <div>
         <form>
           <input type="text" value={this.props.query.name} onChange={this.updateNameInUrl} />
         </form>     
       </div>
    );
  }
}

导出默认类名扩展组件{
render（）{
log（this.props.query）；
返回(
);
}
}

为了在表单更改时更新URL字段，您需要使用更新的值推送新路由

Name.jsx

export default class Name extends Component {
  render() {
    console.log(this.props.query);
    return (
       <div>
         <form>

         </form>     
       </div>
    );
  }
}

export default class Name extends Component {
  constructor(props) {
    super(props);
    this.updateNameInUrl = this.updateNameInUrl.bind(this);
  }

  updateNameInUrl (event) {
    let newName = event.target.value;
    browserHistory.push("/me", {name: newName, age: this.props.query.age};
  }

  render() {
    console.log(this.props.query);
    return (
       <div>
         <form>
           <input type="text" value={this.props.query.name} onChange={this.updateNameInUrl} />
         </form>     
       </div>
    );
  }
}

导出默认类名扩展组件{
建造师（道具）{
超级（道具）；
this.updateNameInUrl=this.updateNameInUrl.bind（this）；
}
updateNameInUrl（事件）{
让newName=event.target.value；
browserHistory.push（“/me”，{name:newName，age:this.props.query.age}；
}
render（）{
log（this.props.query）；
返回(
);
}
}