naver / egjs-infinitegrid

A module used to arrange card elements including content infinitely on a grid layout.
https://naver.github.io/egjs-infinitegrid/
MIT License
2.22k stars 95 forks source link

GridLayout is not rendered when it has NEVER had no child #163

Closed kswgit closed 6 years ago

kswgit commented 6 years ago

Description

GridLayout is not rendered when it has never had no child
I am using egjs-react-layout.

Steps to check or reproduce

sample source

class Item extends Component {
  render() {
    return(
      <div style={{
        width: "320px",
        height: "320px",
        background: "black"
      }} />
    )
  }
}

class MainView extends Component {
  constructor(props) {
    super(props)
    this.state = {
      length: 0,  /* Notice: GridLayout will get no child */
    }
  }
  render() {
    const {
      length
    } = this.state
    const items = Array.apply(null, { length }).map((_, i) => i)
    return (
      <div>
      <button onClick={e => this.setState({ length: length + 1 })}>
      +
      </button>
      <GridLayout align="center" margin={ 12 } >
        {
        items.map(e =>
          <Item />
        )}
      </GridLayout>
      </div>
    )
  }
}

GridLayout has no child, and it is not rendered even if it get more children.

wrong

However, everything is fine when state.length initialize with 1 like below.

good

kswgit commented 6 years ago
ko-kr

리액트 GridLayout 컴포넌트에 자식이 없었을 경우, 자식이 추가되더라도 GridLayout컴포넌트가 렌더되지 않는 문제가 있습니다.
자식이 1개 이상 있었을 경우, 문제없이 동작합니다.

daybrush commented 6 years ago

@egjs/react-layout 1.3.0 version has been deployed. Please try it. Thank you.

kswgit commented 6 years ago

I have tried, and there is no more problem! Thank you.