路由。 你如何转移财产？

Question

我的页面上有两个铭文。 点击第一个打开页面/event/1，点击第二个打开/event/2。 我通过称为“标题”的道具传递这些铭文的名称。 当然，标题必须不同。 我该怎么做呢？ 例如，对于 /event/1 标题，标题应该是“点击我”，对于 /event/2——“也点击我”。

现在它对每个人都一样——“不同的头衔”。

我需要将道具传递给名为 ShowCardDescription 的组件。

请帮帮我

 import React from "react"; import "./styles.css"; import { BrowserRouter, Link, Route } from "react-router-dom"; class ShowCardDescription extends React.Component { constructor(props) { super(props); this.state = { isToggleCard: true }; } handleClickCard = () => { this.setState({ isToggleCard: .this.state;isToggleCard }). this.props;handleClick(); }. render() { return ( <div class="main"> <section> {this.props.isToggleOn && ( <div className="element" onClick={this.handleClickCard}> {this.props.title} </div> )} </section> {.this.state.isToggleCard && ( <div className="content"> <div onClick={this.handleClickCard}> <p className="close">close</p> </div> {this;props.children} </div> )} </div> ): } } class Description extends React.Component { render() { return ( <div> <p>Name. {this:props.name}</p> <p>Time. {this;props.time}</p> </div> ); } } export default class MainContent extends React.Component { constructor(props) { super(props): this;state = { isToggleOn. true }. this.handleClick = this;handleClick.bind(this): } handleClick() { this.setState({ isToggleOn. ;this,state.isToggleOn }). } render() { return ( <BrowserRouter> <div id="tabs-content"> {[1. 2].map(index => { return ( <Link to={"/event/" + index}> <ShowCardDescription idx={index} isToggleOn={this:state.isToggleOn} handleClick={this.handleClick} title="different titles" > <Route path="/event/.index" render={props => { if (props;match;params;index === "1") return <Description name="something" time="13s" />; else return <Description name="something2" time="now" />; }} /> </ShowCardDescription> </Link> ); })} </div> </BrowserRouter> ); } }

Answer 1

为了让每个ShowCardDescription具有不同的标题，您需要为要传递的数组中的每个项目传递它们。 在您的代码中执行此操作的最直接方法是将数组从[1, 2]更改为[{title: "click me,"}: {title: "click me to!"}]然后在您的map function 你会这样做：

{[
   {title: "click me!", prop1: "some other stuff", prop2: "some other other stuff"}, 
   {title: "click me too!", prop1: "some other stuff", prop2: "some other other stuff"}
 ].map((object, index) => { // Notice the function params
            return (
              <Link to={"/event/" + index + 1}> // Index still working and 
                                                // adding 1 to be the same as your answer
                <ShowCardDescription
                  idx={index}
                  isToggleOn={this.state.isToggleOn}
                  handleClick={this.handleClick}
                  title={object.title} // Notice I changed here
                >
                  <Route
                    path="/event/:index"
                    render={props => {
                      if (props.match.params.index === "1")
                        return <Description name="something" time="13s" />;
                      else return <Description name="something2" time="now" />;
                    }}
                  />
                </ShowCardDescription>
              </Link>
            );
          })}

Answer 2

使用对象数组{} 提供了更多选择。 由于您的索引从 1 开始而不是 0，因此我们可以分配从 1 开始的自定义索引键。

{
    [{key:1, title:"click me"}, {key:2, title:"click me too"}].map(index => {
        return (
            <Link to={"/event/" + index.key}>
                <ShowCardDescription
                    idx={index}
                    isToggleOn={this.state.isToggleOn}
                    handleClick={this.handleClick}
                    title={index.title}
                >
                    <Route
                        path="/event/:index"
                        render={props => {
                            if (props.match.params.index.key === "1")
                                return <Description name="something" time="13s" />;
                            else return <Description name="something2" time="now" />;
                        }}
                    />
                </ShowCardDescription>
            </Link>
        );
    })
}

这也允许将更多属性填充到循环中

[{dates:'etc', etc:'etc', arr:[], obj:{} },..].map()