Question

我的主要组件有4个子组件，我希望在它们之间传递状态道具和功能。问题是，在子组件List中，我希望只能使用“ .title”类访问列表的内部。是否有可能像在jQuery中那样在同一个类之间进行跳转？像这样的next（），prev（）和find（）吗？我试图找到任何方法，但到目前为止我失败了。

class List extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        title: ""
    }
}

    render() {
        return (
    <div>
        <ul className="List">
          <li>
           <ul className="song">
             <li className="time">
               3:16
             </li>
             <li className="title" onClick= {this.handleSong}> Title I want to pass
             </li>
           </ul>
          </li>
    <ul className="List">
          <li>
           <ul className="song">
             <li className="time">
               4:16
             </li>
             <li className="title" onClick= {this.handleSong}> next Title I want to pass
             </li>
           </ul>
          </li>
    </div>

这是我可以访问一个元素但不知道如何切换到下一个元素的函数

handleSong = (event) => {
        this.setState({
            title: event.currentTarget.textContent,
        })
        event.preventDefault()
    }

已更新：我按照您的建议更改了代码，现在看起来像这样：内部主要组件：

class Widget extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isClicked: true,
            playerDisplayed: true,
            title: "Still Don't Know",
            songs: []
        }
    }



componentDidMount() {
                const url = "http://localhost:3000/ListOfSongs"
                fetch(url)
                    .then(resp => resp.json())
                    .then(data => {
                        this.setState({
                            songs: data
                        })
                        console.log(data);
                    });
            }

        return (
             <div className="container">
               <div className="wrapperList">
                  <HeaderList
                    handleReturn={this.handleReturn.bind(this)}/>
                  <ul className="songsList">
                     {this.state.songs.map(e =>
                     <SongsList id={e.id} title={e.title} time={e.time}
                     handleChooseSong={this.handleChooseSong.bind(this)}
                     playerDisplayed={this.state.playerDisplayed}/>
                                    )}
                  </ul>
                </div>
              </div>
                    )
                }

SongList组件：

 <li id={this.props.id}>
    <ul className="song">
     <li className="timeAndBand">
       {this.props.time} || {this.props.band}
     </li>
     <li className="title" onClick={this.props.handleChooseSong}>
           {this.props.title}
     </li>
     <li className="icons">
          <svg aria-hidden="true" data-prefix="fas" data-icon="share-alt"className="shareBtn" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
           </svg>
           <svg aria-hidden="true" data-prefix="fas" data-icon="heart"
             className="heartBtn" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            </svg>
     </li>
   </ul>
 </li>

Answer 1

每首歌曲都应该是一个组成部分：

<Song id={song.id} title={song.title} time={song.time} 
   handleClick={someHandlerInParent} />

在<Song />中的

当然是html和

onClick={ this.props.handleClick( this.props.id ) }

通过这种方式，您可以将选定歌曲的信息传递给列表组件（父对象），按ID进行过滤，获取标题，时间等信息。使用地图渲染列表，您可以告诉Song（通过prop）当前已选择使用另一种样式/类进行渲染...不是通过获取/选择DOM节点并添加/删除类-通过react可以更简单，更强大-渲染fn可以选择样式，显示其他选项（组件）。

搜索更多教程，甚至包括TODO示例-react不是另一个模板引擎-您必须学习thinking in react。刚开始写一些知识就很难写代码。

更新：看这个例子-组件可以包含更多（复杂）数据，而无需“人为地将其泵入html”（每个模板引擎都需要）。您只能在html中显示部分数据，并且仍然使用所有“幕后”！ 无需再搜索ID（下一个/上一个/第n个孩子...），获取值，道具，状态...或手动回滚更改（grrr＃$％）。您可以不使用hand tools而无需逐步操作（容易出错）的对象-with react you have automation'CNC'。

反应在具有相同类的列表之间切换

1 个答案: