在React中切换不同组件中的div元素

Question

我是一名对React相当新的开发者。我正在尝试构建一个网站，该网站可以单击导航项（在本例中为音乐类型），并列出属于该特定类型的所有歌曲。

我的app.js如下所示：

import React, { Component } from 'react';
import ListGenres  from './ListGenres';
import './App.css';


class App extends Component {
    constructor(props) {
      super();
      this.state = {dataList: props.dataList};
    }
    render() {
      return (
        <div>
          <div className="App">
            <Navigation tracks = {this.state.dataList} />
            <ListGenres tracks = {this.state.dataList}/>
          </div>
        </div>
     );
   }
}

export default App;

我有一个导航组件，长这样：

import React from 'react';
import HeaderBar  from './HeaderBar'; 
import MenuItem from 'material-ui/MenuItem';

export class Navigation extends React.Component {
constructor(props) {
    super();
}
/*
onClickFunction() {
    toggle elements in another component
}
*/
render() {
    const genres = this.props.tracks.map((elem) => {
        return elem.genre;
    });
    const filtered = genres.filter((elem, index, self) => {
      return self.indexOf(elem) === index;
    });
    const genreLoop = filtered.map((elem, i) => {
      return (
        <MenuItem 
            onClick= {this.onClickFunction}
            key={ i }><a>{ elem }</a>
        </MenuItem>);
    });
    return (
        <div>
            { genreLoop }
        </div>
    );
  }
}
export default Navigation;

我的项目列表在另一个组件中呈现，看起来像这样：

import React from 'react';
import './ListGenres.css';

export class ListGenres extends React.Component {
    constructor(props) {
    super();
}
render() {
    return (
        <div className="genreList">
            <div className="tracklist-visible tracklist-pop">
                <ul>
                    <h3>Pop</h3>
                    { this.tracklist('Pop') }   
                </ul>
            </div>
            <div className="tracklist-visible tracklist-metal">
                <ul>
                    <h3>Pop</h3>
                    { this.tracklist('Metal') } 
                </ul>
            </div>
        </div>
   );
}

是否有办法在从导航组件点击锚点时向曲目列表(div)添加CSS类? 似乎由于导航组件是"独立的"，因此无法从该组件传递任何属性?

- AvoQ

---

这两个组件之间有什么关系？onClickFunction函数在哪里？ - Dekel

抱歉，那只是我留下来的一些摆弄。现在已经在注释之间添加了该函数。 - AvoQ

如果代码不相关，请将其删除。如果它是相关的，请确保有连接。 - Dekel

组件之间没有连接，它们只从上层组件获取相互的属性。 - AvoQ

因此，添加上级组件以便我们理解上下文。 - Dekel

将状态设置为上层组件，将回调函数传递给“导航”组件。每当单击导航时，调用该回调函数。现在通过事件可以看到单击了哪个元素或其他内容，更新状态并将其传递给“ListGenres”。 - Nicholas

Answer 1

您需要提升状态。

当然，您也可以使用Redux来解决这个问题，但让我们保持简单，只使用React。

状态提升

创建一个组件，其中包含<Navigation />和<ListGenres />组件。

将状态（genre和selectedGenre）保存在此父组件中，并通过props向下传递。

您还需要创建一个回调以处理流派的更改。

以下是示例：

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      selectedGenre: null,
      genres: [...]
    }
  }

  onGenreChange (genre) {
    this.setState({ selectedGenre: genre })
  }

  render () {
    return (
      <div>
        <Navigation
          onGenreChange={genre => this.onGenreChange(genre)}
          genres={this.state.genres}
        />
        <ListGenres
          genres={this.state.genres}
          selectedGenre={this.state.genres}
        />
      </div>
    )
  }
}

- Guilherme Santiago

---

是的，这就是诀窍！这基本上是我尝试做的事情，即状态提升！谢谢您，先生！ - AvoQ

Answer 2

你没有提供关于如何工作的代码或示例，但我理解你正在寻找类似选项卡的行为，其中你点击一个选项卡，相应的视图会呈现出来。
如果是这样的话，那么你需要一个父组件来管理所选选项卡并分别呈现视图。 这是一个简单的示例：

const tabs = ["Pop", "Rock", "Rap", "Electro"];

const View = ({name}) => <h1 className="view">{`This is ${name} music!`}</h1>

class Tab extends React.Component {
  constructor(props) {
    super(props);

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

  onClick() {
    const { id, onClick } = this.props;
    onClick(id);
  }

  render() {
    const { name, id, isSelected } = this.props;
    const css = `tab ${isSelected && 'selected'}`;
    return (
      <div
        className={css}
        onClick={this.onClick}
      >
      {name}
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 1
    }

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

  onTabChange(id) {
    this.setState({ selectedTab: id });
  }

  render() {
    const { selectedTab } = this.state;
    return (
      <div>
        {
          tabs.map((t, i) => {
              return (
              <div className="wrapper">
                <Tab name={t} id={i + 1} isSelected={selectedTab === i + 1} onClick={this.onTabChange} />
                {selectedTab == i + 1 && <View name={t} />}
              </div>
              )
            })
        }
      </div>
    );
  }
}

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

.tab {
  display: inline-block;
  margin: 0 10px;
  width: 60px;
  text-align: center;
  cursor: pointer;
  padding: 5px;
}

.selected {
  border: 1px solid #eee;
  box-shadow: 0 0 3px 1px #999;
}

.wrapper{
  display:inline-block;
}

.view{
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 50px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

- Sagiv b.g