布线错误，如何解决？

176

杰西卡·康沃尔（Jessica Cornish）：

每次单击时，我都需要将其重定向到带有索引的页面。也就是说，URL为“ / event / 1”，“ event / 2”，依此类推。我试图做某事，但是显然由于“地图”，我无法正常工作。事实证明，如果map [1,2,3]中的元素数比我需要的多3倍。我不知道该怎么做。

请帮帮我。我还是个菜鸟。

class ShowCardDescription extends React.Component {
  constructor(props) {
        super(props);
        this.state = {isToggleCard: true};
        this.handleClickCard = this.handleClickCard.bind(this);
    }


    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}/>}
        </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>some text here</p>
      </div>
    )
  }
}


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 [1,2,3].map((index) => {
          return (
            <BrowserRouter>
              <div id="tabs-content">
                <Link to={'/event/' + index}>
                    <ShowCardDescription isToggleOn={this.state.isToggleOn} handleClick={this.handleClick}>
                      <Switch>
                        <Route path='/event/:index'>
                          <Description />
                          <Description />
                          <Description />
                        </Route>
                      </Switch>
                    </ShowCardDescription>
                  </Link>
                </div>
             </BrowserRouter>
        )
      })
    }
}

ReactDOM.render(
  <MainContent />, 
  document.getElementById('root')
);

扎卡里·哈伯（Zachary Haber）：

我不确定您要做什么，所以我删除了一些重复内容并做了一些清理。

我在这里使用内存路由器，因为BrowserRouter在堆栈溢出内不起作用。

我将索引传递给元素，以仅显示存在哪些元素。

在ShowCardDescription中，实际上并不需要路由，因为您甚至没有使用参数或有关路由的任何内容，并且正在渲染3个不同的描述。

    <Route path='/event/:index'>
      <Description />
      <Description />
      <Description />
    </Route>

我将其更改为此名称，以使Description组件能够使用该路由道具并摆脱重复项。虽然如果您需要复制它，则可以随时修改“描述”，或重复此行。

<Route path="/event/:index" component={Description}/>

如果您想要带有说明的道具并使用路线，则可以使用render函数：

<Route path="/event/:index" render={(renderProps)=><Description {...renderProps} otherProp="hi" />}/>

如果您想要带有路线道具的多个组件，则可以使用：

<Route path="/event/:index" render={(renderProps)=><React.Fragment><Description {...renderProps} otherProp="hi" />

} />

如果需要，还可以将Description包裹起来，withRouter这样您就可以使用首字母缩写：

 const WrappedDescription = withRouter(Description);

    <Route path='/event/:index'>
      <WrappedDescription otherProp="hi"/>
      <WrappedDescription />
      <WrappedDescription />
    </Route>

如果您根本不需要使用该路线，

<Description otherProp="hi"/>
<Description otherProp="hi2"/>

如果您有一个带有道具的数组来映射：

[{otherProp="hi",key:1},{otherProp="hi2",key:2}].map(data=><Description {...data}/>)

简而言之，可以使用多种方式处理道具和渲染项目。

这是其中一个工作示例：

const { MemoryRouter, Link, Switch, Route } = ReactRouterDOM;

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.idx}
            </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>some text here {this.props.match.params.index}</p>
      </div>
    );
  }
}

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 (
      <MemoryRouter>
        <div id="tabs-content">
          {[1, 2, 3].map((index) => {
            return (
              <Link to={'/event/' + index}>
                <ShowCardDescription
                  idx={index}
                  isToggleOn={this.state.isToggleOn}
                  handleClick={this.handleClick}
                >
                  <Route path="/event/:index" component={Description}/>
                </ShowCardDescription>
              </Link>
            );
          })}
        </div>
      </MemoryRouter>
    );
  }
}

ReactDOM.render(<MainContent />, document.getElementById('root'));

.element {
  width: 200px;
  height: 40px;
  background: grey;
  margin-bottom: 0.25rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.2.0/react-router-dom.min.js" integrity="sha256-D8mVu8eRkAsTYloDamogrsYZAjh6j+29tycpvfJaG68=" crossorigin="anonymous"></script>

<div id="root" />

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。