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

我还没有反应过来。我正试图建立一个网站，你可以点击导航项目（在本例中是音乐流派），它将列出所有属于该特定流派的歌曲

我的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>
   );
}

import React，{Component}来自'React'；
从“./ListGenes”导入ListGenes；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（）；
this.state={dataList:props.dataList}；
}
render（）{
返回(
);
}
}
导出默认应用程序；

我有一个如下所示的导航组件：

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>
   );
}

从“React”导入React；
从“/HeaderBar”导入HeaderBar；
从“物料界面/菜单项”导入菜单项；
导出类导航扩展了React.Component{
建造师（道具）{
超级（）；
}
/*
onClickFunction（）{
切换其他组件中的元素
}
*/
render（）{
const-genres=this.props.tracks.map（（elem）=>{
返回元素类型；
});
const filtered=genres.filter（（元素、索引、自身）=>{
返回self.indexOf（elem）==索引；
});
const genreLoop=filtered.map（（elem，i）=>{
返回(
{elem}
);
});
返回(
{genreLoop}
);
}
}
导出默认导航；

我的项目列表在另一个组件中呈现，该组件如下所示：

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>
   );
}

从“React”导入React；
导入“./ListGenres.css”；
导出类ListGenes扩展React.Component{
建造师（道具）{
超级（）；
}
render（）{
返回(

流行音乐
{this.tracklist（'Pop'）}


流行音乐
{this.tracklist（'Metal'）}

);
}

当从导航组件单击锚点时，是否有可能将css类添加到tracklist div？看起来我无法从该组件传递任何道具，因为它是“独立”组件？

您需要这样做

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

提升状态提升

创建一个将同时包含

和

组件的组件

将状态（

genre

和

selectedGenre

）保留在此父组件中，并通过道具传递

您还需要创建一个回调来处理类型更改

下面是一个例子：

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

类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
selectedGenre:null，
类型：[……]
}
}
onGenreChange（流派）{
this.setState（{selectedGenre:genre}）
}
渲染（）{
返回(
这个.onGenreChange（流派）}
流派={this.state.genres}
/>
)
}
}

您没有提供太多关于如何工作的代码或示例，但据我所知，您正在寻找一种类似于选项卡的行为，单击选项卡并显示相应的视图。
如果是这种情况，则需要一个父组件来分别管理选定的选项卡和渲染视图。 这是一个简单的例子：

const tabs=[“流行乐”、“摇滚乐”、“说唱乐”、“电子乐”]；
const View=（{name}）=>{`这是${name}音乐！`}
类选项卡扩展了React.Component{
建造师（道具）{
超级（道具）；
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'}`；
返回(
{name}
);
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
所选选项卡：1
}
this.onTabChange=this.onTabChange.bind（this）；
}
onTabChange（id）{
this.setState（{selectedTab:id}）；
}
render（）{
const{selectedTab}=this.state；
返回(
{
tabs.map（（t，i）=>{
返回(
{selectedTab==i+1&&}
)
})
}
);
}
}
ReactDOM.render（，document.getElementById（'root'））
.tab{
显示：内联块；
利润率：0.10px；
宽度：60px；
文本对齐：居中；
光标：指针；
填充物：5px；
}
.选定{
边框：1px实心#eee；
盒影：0 0 3px 1px#999；
}
.包装纸{
显示：内联块；
}
.视图{
位置：绝对位置；
排名：0；
左：0；
边缘顶部：50px；
文本对齐：居中；
}

这两个组件之间的关系是什么？onclick函数在哪里？对不起，没有。那只是我留下来的小提琴。现在添加了注释之间的函数。如果代码不相关，请删除它。如果相关-确保有连接..组件没有连接，它们只从上层组件获得相互的道具。因此添加上层组件以便我们能够理解上下文。是的，这就成功了！这就是我基本上想要做的，提升状态！谢谢你，先生！