javascript - react 类更新

Question

类似于:

class Parent extends Component {
    render() {
        return (
        <MenuElem isSelected={false} />
        <MenuElem isSelected={true} />
        );
    }
}
class MenuElem extends Component {
    render() {
        return (
            <li onClick={() => this.setState({isSelected: true})} className={this.props.isSelected ? "is-active" : ""}>
            </li>
        );
    }
}

为什么 isSelected Prop 在我触发点击事件时不更新？单击时如何添加“is-active”类？

Answer 1

您在逻辑中将 props 和 state 混合在一起。

• props 是组件从其自身接收的外部参数 parent 。它们是只读的， child 不能更改。
• state 是一个被更新的本地对象。本地的方式，只有完全相同的组件“知道”它。

在您的示例中，您将一个 bool 值 isSelected 从父级传递给子级，然后在子级的 (MenuElem) onClick 事件中传递您正在创建一个本地 bool isSelected (在本地状态对象内)但是当您有条件地传递 CSS 样式时，您正在检查 prop isSelected 通过父级传递，子级无法更改，因为它是只读属性。

您可以检查 this.state.isSelected 或只传递来自父级的更新的 props.isSelected。第二个选择意味着您需要在父级管理状态。

child 内部本地状态的小例子:

class Parent extends React.Component {
  render() {
    return (
      <MenuElem />
    );
  }
}
class MenuElem extends React.Component {

  state = {
    isSelected: false
  }

  render() {
    const { isSelected } = this.state;
    return (
      <li onClick={() => this.setState({ isSelected: true })} style={{ color: isSelected ? 'green': 'initial'  }}>
        item
      </li>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

父状态的示例，请注意，建议跟踪 id，这样您就可以向父状态发出信号，表明哪个 child 被点击了:

class Parent extends React.Component {

  state = {
    items: [
      { id: 1, name: 'item 1', selected: false },
      { id: 2, name: 'item 2', selected: true }]
  }

  onItemClick = itemId => {
    this.setState(prev => {
      const nextItems = prev.items.map(item => {
        return {
          ...item,
          selected: item.id === itemId
        }
      });
      return { items: nextItems };
    })
  }

  render() {
    const { items } = this.state;
    return (
      <div>
        {
          items.map(item => (
            <MenuElem
              key={item.id}
              {...item}
              onClick={this.onItemClick}
            />
          ))
        }
      </div>
    );
  }
}
class MenuElem extends React.Component {

  onClick = () => {
    const { onClick, id } = this.props;
    onClick(id);
  }

  render() {
    const { selected, name } = this.props;
    return (
      <li
        onClick={this.onClick}
        style={{ color: selected ? 'green' : 'initial' }}>
        {name}
      </li>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>