React：如何显示默认对象并突出显示 li 粗体？

Question

我对 React 还很陌生，想知道是否有人可以对我遇到的问题提供见解。

现在我有一个父组件（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 Child1：

    import React, { Component } from 'react';

    class Mixer extends Component{
        constructor(props) {
            super(props);
            this.state = {
            }
        this.handleClick = this.handleClick.bind(this);

    }

    handleClick(item){
        this.props.onClick(item);
    }

    renderTodos(propItems) {
          return (
              <div>
                {propItems.map((item) => (
                <li className={this.props.selected === item ? 'media clicked' : 'media'}
                key={item.id} onClick = {() => this.handleClick(item)}> 
                    {item.name}  
                </li>
                ))}
           </div>
          )
      }

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

export default Mixer;

第二个子比较 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;

和 CSS：

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

Answer 1

我认为问题在于Mixer.js 中this.props.selected 的初始值和最终值之间存在一些不匹配。您最初设置了this.state.selectedItem = 0，这是最初作为selected 属性传递给Mixer 的内容。但是您在该组件中应用的测试是

this.props.selected === item ?

虽然有一个item.id === 0，但从来没有一个item === 0。所以一开始没有突出显示任何项目。但是，一旦点击了item 并且selectedItem 实际上设置为item，该条目就会变为粗体。

因此，看起来您需要使初始选择等于 item.id === 0 引用，或者在组件中始终通过 id 引用 items。