Question

我有一个带有react-router的父组件，设置如下：

constructor(props){
    super(props);

    this.state = {
        diner: false
    };

    this.updateFromInvite = this.updateFromInvite.bind(this);
}

updateFromInvite(Souper) {
    this.setState({diner: Souper});
}

我无法弄清楚如何设置路由以同时拥有两个网址参数并能够传递函数来更新子组件中的父状态......

<Route path="/Invitation/:NomParam1?/:NomParam2?" 
       component = {() => (<Invitation updateApp = {this.updateFromInvite} />)} />

我认为这是我最接近的......

来自儿童的组成部分：

class Invite extends Component {
    constructor(props){
        super(props);
        this.state = {
            diner: this.props.match.params.NomParam1 ,
            JSONInfo: this.props.match.params.NomParam2
        };
    }

    componentDidMount() {
        const { diner } = this.state;
        const { JSONInfo } = this.state;
        const { updateApp } = this.props;
        updateApp(diner);
    }

  render() {
    return (
      <div className="Invite">
        <div className="col-centered">
            <VidPlay/>
        </div>
      </div>
    );
  }
}

export default Invite;

Answer 1

路由的component属性采用组件Class，而不是组件的实例。我相信您希望使用render属性，该属性采用渲染组件。您的可视组件不应该关注路由详细信息，因此您可以将其传递到Route配置中，如下所示：

<Route path="/Invitation/:NomParam1?/:NomParam2?" 
  render={({match}) => (
    <Invitation
      updateApp={this.updateFromInvite}
      diner={match.params.NomParam1}
      JSONInfo={match.params.NomParam2}
    />
  )}
/>

然后，在组件中，不要使用state，因为它不是真正的用途：

class Invite extends Component {
    componentDidMount() {
        const { diner, JSONInfo, updateApp } = this.props;

        // Not exactly sure what is going on here... how you
        // will use JSONInfo, etc
        updateApp(diner);
    }

  render() {
    return (
      <div className="Invite">
        <div className="col-centered">
            <VidPlay/>
        </div>
      </div>
    );
  }
}

另外，我不是完全确定父组件正在做什么，以及为什么它将路由参数和函数传递给子组件，只是让孩子将其调回......但这可能超出了问题的范围。

享受！

Answer 2

如果最终得到它（感谢that answer和the official documentation）：

我需要添加props作为渲染参数和
在children元素中使用{...props}！

<Route path="/Invitation/:NomParam1?/:NomParam2?" 
       render={ (props) => 
                (<Invitation updateApp = {this.updateFromInvite} {...props} />) 
              }
/>

有了这个，我可以访问BOTH：

我的自定义道具
通用道具（match，location和history）

设置反应路由以使用URL参数和道具功能

2 个答案: