React.jsのボタンをクリックして配列の最初のビデオを表示したい

Question

私はReactでかなり新しいです。 私はShowMoreとShowLessの間をクリックするとボタンが変わるが、このボタンを押すとさらに多くの配列を表示したいと思う。 私を助けてもらえますか？ は、ここでは、コードです：

class Videos extends Component { 

state = { 
    shouldHide: true 
}; 

onClick = (e) => { 
e.preventDefault(); 
if (this.state.shouldHide) { 
    this.setState({ 
    shouldHide: false 
    }); 
} else { 
    this.setState({ 
    shouldHide: true 
    }); 
} 
}; 

addVideo = (e) => { 
e.preventDefault(); 
this.props.showVideoModalAdd(); 
}; 

render =() => { 
const { videos, allowEdit, specialistId } = this.props; 
console.log(this.state); 
const result = allowEdit || (videos && videos.length > 0) ? (
    <div> 
    {videos.map(video => (
     <div key={video.id}> 
     <Video 
      video={video} 
      allowEdit={allowEdit} 
      specialistId={specialistId} 
     /> 
     </div> 
    ))} 
    {allowEdit && (
     <span className="edit pull-right"> 
     <a href="#" onClick={this.addVideo}>+ Add Video</a> 
     <br /><br /> 
     <a href="#" onClick={this.onClick}> 
      {this.state.shouldHide ? 'Show Less' : 'Show More'} 
     </a> 
     </span> 
    )} 
    </div> 
) : null; 
    return result; 
}; 
} 

私は私はあなたがこれを達成することができますどのように多くの方法がありますがどのように

Answer 1

必ずvideos.mapは変更はなくてはならないことをこれまでにわかっています。本質的には、状態shouldHideの天気をチェックし、mapが最初の繰り返しで続行するか停止するかどうかを確認します。

if (this.state.shouldHide && i > 0) { 
    return false; 
} 

私も多分、独自のメソッドにmapを入れて、代わりに条件演算子（condition ? true : false）の条件付きブロックを使用し、あなたのコードを少しリファクタリングすることをお勧めします。

const videos = [ 
 
    { id: 1, title: "first" }, 
 
    { id: 2, title: "second" }, 
 
    { id: 3, title: "third" } 
 
]; 
 

 
class Videos extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { shouldHide: true }; 
 
    this.onClick = this.onClick.bind(this); 
 
    } 
 

 
    onClick() { 
 
    this.setState({ shouldHide: !this.state.shouldHide }); 
 
    } 
 

 
    addVideo(e) { 
 
    e.preventDefault(); 
 
    console.log("Add video by callback."); 
 
    // this.props.showVideoModalAdd(); 
 
    } 
 

 
    render() { 
 
    const { videos, allowEdit, specialistId } = this.props; 
 
    console.log(this.state); 
 
    const result = allowEdit || videos && videos.length > 0 
 
     ? <div> 
 
     {videos.map((video, i) => { 
 
      if (this.state.shouldHide && i > 0) { 
 
       return false; 
 
      } 
 
      return (
 
       <div key={video.id}> 
 
       <div id="video">{video.title}</div> 
 
       </div> 
 
      ); 
 
      })} 
 
     {allowEdit && <span className="edit pull-right"> 
 
       <a href="#" onClick={this.addVideo}>+ Add Video</a> 
 
       <br /><br /> 
 
       <a href="#" onClick={this.onClick}> 
 
       { 
 
        this.state.shouldHide 
 
        ? "Show More" 
 
        : "Show Less" 
 
       } 
 
       </a> 
 
      </span>} 
 
     </div> 
 
     : null; 
 
    return result; 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Videos videos={videos} allowEdit={true} specialistId={420} />, 
 
    document.getElementById("View") 
 
);

<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='View'></div>