Question

我有一些叫做channel的数据，它是一个包含对象的数组：

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

当用户点击 TvGuide 组件中的某个链接时，我想将道具数据发送到 TvView 组件，因此它可以呈现通道的名称。做出反应的最佳方法是什么？

Answer 1

从ChannelContainer我会将一个onClick处理程序传递给TvGuide，这会在点击频道时调用，这会调用容器中的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> ); } 1}}。

target

基于数组对象id呈现React组件

1 个答案: