反应条件渲染与状态

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}不会在[=上设置onClick事件15=] 而不是将 onClick 作为 prop 传递给 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。

反应条件渲染与状态

React Conditional Rendering with states

javascript

state

if-statement

reactjs