Question

我正在使用react-router的<Link />，以便当用户点击该链接时，会呈现myComponent。

我的问题是，如何将道具传递到myComponent组件的Navigation？这不起作用，但我正在尝试将element.name道具从Navigation传递到myComponent。

class Navigation extends Component {
  const items = store.getState().items.map((element, index) =>
    <Link to={element.id} name={element.name}> element.id </Link>
  )

  render() {
    return (
      {items}
    )
  }
}

这是路线设置＆amp;组件设置：

<Route path=":id" component={myComponent} />

// I'd like to pass in props to be used here from the Navigation component, for example, a name prop passed through <Link />

class myCompnent extends Component {
  render() {
    return (
      <div>
        <p> hello {this.props.name} </p>
      </div>
    )
  }
}

Answer 1

react-router Link

我认为没有办法从＆lt; Link＆gt;传递道具到组件，但使用链接的'查询'参数可以传递路径的东西，它将作为查询添加在路径上，如：？name = jack＆amp; aa = bb

<Link to={element.id} query={{ name: element.name }}>{element.id}</Link>

从组件

中的this.props.location.query中获取它

componentDidMount: function () {
    var query = this.props.location.query;
    if ( query && query.name ) {
        this.setState({
            name: name
        });
    } 
}

// in render
<p> hello {this.state.name} </p>

Answer 2

您可以做的是通过将props附加到Parent Component中的Component链接来传递它们，并使用子组件中的componentWillReceiveProps方法获取它们。

例如：

父组件

<Link to {`element.id/{$element.name}`}>{element.id}</Link>

子组件

componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.props.value) {
        console.log(this.props); //Here you can fetch the props which you have passed
    }
}

react-router：将props传递给使用<link />呈现的组件

2 个答案: