用状态反应条件渲染

Question

我在一个组件中工作，如果我点击NavItem我会呈现另一个元素列表

改变状态的函数

handleClick() {
  this.setState({
    isActive: !this.state.isActive
  });
};

条件渲染

if (isActive) {
  SubList = <List hasIcons style="secondary"><ListItem><NavItem href={desktopUrl} title={title}><Icon name={name} />{title}</NavItem></ListItem></List>
}

List NavItem 和{{SubList}}

<ListItem>
    <NavItem isActive href={desktopUrl} title={title} onClick={this.handleClick}>
        <Icon name={name} />
        {title}
    </NavItem>
    {SubList}
</ListItem>

这里是整个组件

export default class SportNavItem extends React.Component {
  constructor() {
    super();
    this.state = { isActive: false };
    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      isActive: !this.state.isActive
    });
  }

  render() {
    const { title, desktopUrl, isActive, name } = this.props.data;
    // props.childItems; { title, name, isActive, url }

    // const itemId = `nav-${slugEn}`;
    const style = isActive ? "primary" : "default";

    let SubList = null;

    if (isActive) {
      SubList = (
        <List hasIcons style="secondary">
          <ListItem>
            <NavItem isActive href={desktopUrl} title={title}>
              <Icon name={name} />
              {title}
            </NavItem>
          </ListItem>
        </List>
      );
    }

    return (
      <List hasIcons style={style}>
        <ListItem>
          <NavItem isActive href={desktopUrl} title={title} onClick={this.handleClick}>
            <Icon name={name} />
            {title}
          </NavItem>
          {SubList}
        </ListItem>
      </List>
    );
  }
}

导出的组件

const sampleData = {
  title: 'Football',
  name: 'football',
  isActive: true,
  desktopUrl: '#'
}

ReactDOM.render(
    <div>
        <SportNavItem data = { sampleData }/>
    </div>,
    document.getElementById('app')
);

如果我手动将状态isActive更改为false我可以呈现SubList 。 我无法处理onClick状态，并且在控制台中没有看到错误。 可能有什么问题？ 有没有更好的办法？

Answer 1

您正在尝试从this.props.data读取isActive ：

const { title, desktopUrl, isActive,  name  } = this.props.data;

...但isActive处于this.state 。 改为：

const { title, desktopUrl, name } = this.props.data;
const { isActive } = this.state;

Answer 2

首先，正如@Jacob 所建议的，您的变量isActive是一个state而不是prop 。 你应该像这样使用它

const { title, desktopUrl, name  } = this.props.data;
const {isActive} = this.state;

其次，如果NavItem是您创建的自定义组件，则onClick={this.handleClick}不会在NavItem上设置onClick事件，而是将onClick作为道具传递给NavItem组件。 在NavItem组件中，您可以在 div 上有一个 onClick 事件，该事件将依次从 props 调用onClick函数，从而导致this.handleClick被调用。 如果您查看ReactBootstrap中的NavItem组件。 它有一个onClick道具，基本上和我上面建议的一样

因此，从技术上讲，您不能对任何组件进行onClick事件。 您可以将NavItem包装在一个 div 中，然后在该 div 上设置一个onClick事件

     <ListItem>
         <div onClick={this.handleClick}>   
            <NavItem isActive href={desktopUrl} title={title} >
                <Icon name={name} />
                {title}
            </NavItem>
            {SubList}
         </div>
    </ListItem>

Answer 3

您不能onClick自定义组件。 用具有onClick方法的 div 包裹 NavItem。