用狀態反應條件渲染

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。