Ich möchte nur das erste Video im Array zeigen, indem ich auf eine Schaltfläche mit React.js

Question

Ich bin ziemlich neu mit React. Also ich habe eine Schaltfläche, die, wenn ich klicke, zwischen ShowMore und ShowLess wechselt, aber ich möchte nur das erste Video des Arrays zeigen und mehr zeigen, wenn ich diesen Knopf drücke. Können Sie mir bitte helfen? Hier ist der Code:

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

ich bisher weiß, dass ich die videos.map ändern sollte, aber nicht sicher, wie

Answer 1

viele Möglichkeiten gibt es, wie Sie dies erreichen können. Im Wesentlichen möchten Sie das Wetter shouldHide überprüfen und sehen, ob die map bei der ersten Iteration fortsetzen oder stoppen soll.

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

Ich würde Sie auch ermutigen, Ihren Code ein wenig Refactoring, vielleicht die map in seine eigene Methode setzen und bedingte Blöcke statt bedingten Operatoren (condition ? true : false) verwenden.

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>