Javascript 使用状态响应条件渲染

我在一个组件中工作，如果单击

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

这里是整个组件

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

导出默认类SportNavItem扩展React.Component{
构造函数（）{
超级（）；
this.state={isActive:false}；
//此绑定是使`This`在回调中工作所必需的
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
这是我的国家({
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”；
设SubList=null；
如果（isActive）{
子列表=(
{title}
);
}
返回(
{title}
{子列表}
);
}
}

导出的组件

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

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

const sampleData={
标题:"足球",，
名称：'足球'，
是的，
桌面URL:“#”
}
ReactDOM.render(
,
document.getElementById（'app'）
);

---

如果我手动将状态

isActive

更改为

false

，我可以呈现

子列表

。我无法在单击时处理状态

onClick

，并且在控制台中没有看到错误。可能出了什么问题？有更好的方法吗？

您正在尝试从

此.props.data

中读取

isActive

：

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

…但

isActive

处于

此状态。改为：

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

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

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

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

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

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


{title}
{子列表}
您不能在自定义组件上单击
onClick
。用一个具有
onClick
方法的div包装NavItem。
是的，这是我犯的第一个错误，但没有纠正它。
NavItem
是什么？它是否有一个
onClick
prop？您不能将
onClick
添加到任何内容。您不能在自定义组件上添加
onClick
。使用具有onClick方法的
div
包装
NavItem
。将其添加为答案以接受它
     <ListItem>
         <div onClick={this.handleClick}>   
            <NavItem isActive href={desktopUrl} title={title} >
                <Icon name={name} />
                {title}
            </NavItem>
            {SubList}
         </div>
    </ListItem>