渲染REACT基于阵列对象的id组件

Question

我有一些数据称为通道，其是包含数组对象：

channels : [ 
    { name:'tv100',number:'100'}, 
    { name:'tv200',number:'200'} 
] 

我在组分反应：

ChannelContainer：

export default class ChannelContainer extends React.Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      channels: '', 
      selectedChannel: '' 
     } 
    } 

    componentDidMount() { 
     let channel_data = [{ name: 'tv100', number: '100' }, { name: 'tv200', number: '200' }]; 
     this.setState = { channels: channel_data } 
    } 

    render(){ 
     return (
      <div className="tv"> 
       <TvGuide channel={this.state.channels} /> 
       <TvView channel_nr={this.state.selectedChannel} /> 
      </div> 
     ); 
    } 
} 

TvGuide组件：

const TvGuide = (props) => { 
    return (
     <div className="tvguide_container"> 
      <ul> 
       {props.channel.map((number, index) => { 
        return(
         <li key={index}> 
          <a> {number}</a> 
         </li> 
        ) 
       }) 
       } 
      </ul> 
     </div> 
    ); 
} 

TvView组件：

const TvView = (props) => { 
    return (
     <div> 
      <h1>{props.channel.name}</h1> 
     </div> 
    ) 
} 
export default TvView 

当电视周刊上的一个链接，用户点击成分，我想道具数据发送到TvView组件，因此它可以呈现频道的名称。在反应中最好的方法是什么？

Answer 1

从ChannelContainer我想传递一个onClick处理程序电视周刊，其将与通道被称为点击，这将调用setState容器，从而重新描绘你TvView。

class ChannelContainer extends React.Component { 

    // ... 

    onGuideClick = (channel) => { 
     this.setState({ 
      selectedChannel: channel 
     }) 
    } 

    render(){ 
     return (
      <div className="tv"> 
       <TvGuide onClick={this.onGuideClick} channel={this.state.channels} /> 
       <TvView channel_nr={this.state.selectedChannel} /> 
      </div> 
     ); 
    } 
} 


const TvGuide = (props) => { 

    return (
     <div className="tvguide_container"> 
      <ul> 
       {props.channel.map((channel) => { 
        const onClick =() => { 
         props.onCLick(channel); 
        } 
        return(
         <li onClick={onClick} key={channel.number}> 
          <a>{channel.name}</a> 
         </li> 
        ) 
       }) 
       } 
      </ul> 
     </div> 
    ); 
}