javascript - 在 React 中单击组件时将类添加到 sibling

Question

我正在使用 React.js 构建我的作品集。在一个部分中，我将四个组件布置在一个网格中。我想要实现的是，当单击一个组件时，将一个 css 类添加到该组件的兄弟组件中，以便降低它们的不透明度，只保留被单击的组件。在 jQuery 中，它类似于 $('.component').on('click', function(){ $(this).siblings.addClass('fadeAway')})。我怎样才能达到这种效果？这是我的代码，在此先感谢您提供的所有帮助!

class Parent extends Component{
  constructor(){
    super();
    this.state = {fadeAway: false}
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(){
    //Add class to siblings
  }
  render(){
    const array = ["Hello", "Hi", "How's it going", "Good Times"]
    return(
      array.map(function(obj, index){
        <Child text={obj} key={index} onClick={() => this.handleClick} />
      })
    )
  }
}

Answer 1

这个问题的一个工作示例可能看起来像这样，带有稍微复杂一点的初始化数组:

class Parent extends Component{
  constructor(){
    super();
    this.state = {
      elements: [
        {
          id: "hello",
          text: "Hello",
          reduced: false,
        },

        {
          id: "hi",
          text: "Hi",
          reduced: false,
        }

        {
          id: "howsItGoing"
          text: "How's it going",
          reduced: false,
        }

        {
          id: "goodTimes",
          text: "Good Times",
          reduced: false,
        }
      ],
    }

    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(e){
    // copy elements from state
    const elements = JSON.parse(JSON.stringify(elements));
    const newElements = elements.map(element => {
      if (element.id === e.target.id) {
        element.reduced = false;
      } else {
        element.reduced = true;
      }
    });


    this.setState({
      elements: newElements,
    });
  }

  render(){
    return(
      this.state.elements.map(function(obj, index){
        <Child
          id={obj.id}
          text={obj.text}
          reduced={obj.reduced}
          key={index}
          onClick={() => this.handleClick} />
      });
    );
  }
}

然后你只需添加一个三元组，就像这样，到 Child 组件:

<Child
  id={this.props.id}
  className={this.props.reduced ? "reduced" : ""} />

这比其他示例添加了更多的样板，但是将业务逻辑与组件内的文本联系起来非常脆弱，而且更强大的解决方案需要更强大的标识，例如呈现的 DOM 元素上的 ID 或类。如果您愿意，该解决方案还可以轻松扩展您的逻辑，以便多个元素可以同时保持最大不透明度。