路由。 你如何轉移財產？

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()