Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

problem with jsx spread operator and props passed to children components #51

Closed
sotaan opened this issue Jan 31, 2017 · 3 comments
Closed

Comments

@sotaan
Copy link

sotaan commented Jan 31, 2017

Here is my code:

export const _isComponent = (tab) => tab.hasOwnProperty('component')
export const _askedForPassedProps = (tab) => tab.hasOwnProperty('props')

const TabContentWrapper = {
  functional: true,

  name: "TabContentWrapper",

  props: {
    // tabs: {
    //   type: Array,
    //   required: true
    // },
    //
    // activeTab: {
    //   type: Number,
    //   required: true
    // },



  },

  render (h, context) {
    const props = context.data.attrs,
      tabs = props.tabs,
      activeTab = props["active-tab"],
      contents = tabs.map( (_tab, index) => {
        const isComponent = _isComponent(_tab),
          isShown = index === activeTab

          let askedProps = _askedForPassedProps(_tab) && _tab.props,
            finalProps = {}

          if (askedProps) {
            _.each(askedProps, (prop) => finalProps[prop] = props[prop])
          }
          const data = { 'props': finalProps }
          debugger
        return isComponent ?
          <_tab.component v-show={isShown} {...data}></_tab.component> :
          <router-view v-show={isShown} name={_tab.name} {...finalProps}></router-view>
      })

    return (
      <div class="tab-content">
        {contents}
      </div>
    )
  }
}

export default TabContentWrapper

None of the techniques used to inject props works 😢

@sotaan sotaan changed the title problem with jsx spred operator and props passed to children components problem with jsx spread operator and props passed to children components Jan 31, 2017
@oknoorap
Copy link

oknoorap commented Feb 6, 2017

I got the same problem.

@zacacollier
Copy link

I'm also experiencing this problem.

In this view, the spread operator works as expected:

import Posts from 'components/Posts'
import Profile from 'components/Profile'
import posts from '../../posts'

export default {
  name: 'Home',
  render (h) {
    // Set props to be passed here
    const data = {
      props: {
        posts: posts,
        msg: 'hola'
      }
    }
    return (
      <div class='page'>
        <Profile />
        <Posts {...data} />
      </div>
    )
  }
}

Then, in the child component Posts, I have to explicitly set props:

import Post from '../Post'

export default {
  name: 'Posts',
  props: {
    posts: Array,
    msg: String
  },
  render (h) {
    const data = {
      posts: this.posts
    }
    return (
      <div>
        {
          data.posts.map((post, index) =>
            <Post key={index}
              // {...post} doesn't work
              author={post.author}
              title={post.title}
              tags={post.tags}
              date={post.date}
            />
          )
        }
      </div>
    )
  }
}

Finally, the child component Post for reference. Even with props set within the render function, via data, the spread syntax won't work:

export default {
  name: 'Post',
  props: {
    author: String,
    date: String,
    tags: Array,
    title: String
  },
  render (h) {
    const data = {
      author: this.author,
      date: this.date,
      tags: this.tags,
      title: this.title
    }
    return (
      <div>
        <h1>{data.title}</h1>
        <h2>{data.author}</h2>
        <h3>{data.date}</h3>
        {data.tags.map((tag, i) => <h5 key={i}>{tag}</h5>)}
      </div>
    )
  }
}

@nickmessing
Copy link
Member

If you experience the same problem check #86, will keep that ticket updated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants