Javascript 反应：如何显示默认对象并突出显示li bold？

我是一个新手，不知道是否有人能给我一个关于我遇到的问题的见解

现在我有一个父组件（Hello.js）和两个子组件（Mixer.js和renderCont.js）在同一级别

我试图在Mixer.js中呈现一个列表，并通过将值传递到RenderCont.js中，在Hello.js中显示其相应的对象。在我点击列表中的任何一个来传递一个对象之前，我已经到了一个什么都不显示的地步

从这里开始，我陷入了困境：我希望列表中的第一个对象显示为默认对象，同时将列表中的第一个对象加粗。然后执行下面的命令

这是我第一次在stackoverflow上发布一个问题，所以我不确定我的问题在附加代码中是否有意义，但我将非常感谢任何支持

家长Hello.js：

import React, { Component } from 'react';
import RenderCont from './renderCont.js';
import Mixer from './Mixer';

class Hello extends Component{
    constructor(props) {
        super(props);
        this.state = {
        items: [{
            id: 0,
            name: "First",
            background: "white"
        }, {
            id: 1,
            name: "Second",
            background: "yellow"
        }, {
            id: 2,
            name: "Third",
            background: "blue"
        }],
        selectedItem: 0
        }
        this.handle = this.handle.bind(this)
    }

    handle(value) {
        // console.log(this.state.selectedItem);
        this.setState({
            selectedItem: value
        })
      }

      render() {
        const list = this.state.items.map((item) => {
            return(item);
        })
        return (
        <div>
            <Mixer item={list} onClick={this.handle} selected={this.state.selectedItem}/>
            <ul id = "todo" > 
                <RenderCont item={this.state.selectedItem}/>
            </ul>
        </div>
      ) 
    }
}

export default Hello;

---

我认为问题在于

Mixer.js

中的

this.props.selected

的初始值和最终值不匹配。您最初设置了

this.state.selectedItem=0

，这是最初作为所选

属性传递给
混合器的内容。但您在该组件中应用的测试是

this.props.selected === item ?

虽然存在一个===0的
item.id
，但从来没有一个===0的
item
。因此，首先不会突出显示任何项目。但是，一旦单击了
项
，并且
selectedItem
实际上被设置为
项
，条目就会变为粗体

因此，看起来您需要使初始选择等于
item.id==0
引用，或者通过组件的
id
一致地引用组件中的
items
。
谢谢。我如何实现通过id引用组件中的项？此外，应通过renderCont.js显示相应的对象。你有什么建议吗？
import React, { Component } from 'react';

class RenderCont extends Component{
    constructor(props) {
        super(props);
    }

    renderBox(item){
        return(
            <div style={{color:item.background}}>
                {item.id}
                {item.name}
            </div>
        )
    }

    render() {
    return ( 
        <div className="yoyo">
            {this.renderBox(this.props.item)}
        </div>
    )
    }
}

export default RenderCont;

.yoyo{
  left: 500px;
  background-color:red;
  width:500px;
  height:500px;
}

.media{
  color: black;
}
.clicked{
  font-weight: 900;
}

.yoyoyo{
  background-color:lightblue;
  width:200px;
  height:200px;
}

this.props.selected === item ?