传递反应轨道中的道具并设置参考

时间:2017-12-17 10:38:25

标签: javascript ruby-on-rails react-rails refs react-props

我正在尝试构建一个简单的rails后端并对前端博客应用做出反应。一切都很顺利,直到我在编辑帖子时编辑动作。我不能在表单中设置propTypes和使用refs。我收到以下错误

[![see the below image link to see the error details][1]][1]


[1]: https://i.stack.imgur.com/VvdS0.png

我正在使用react-rails gem

这是我的控制器编辑和更新操作

def edit
 @post = Post.find(params[:id])
end

def update
 if @post.update(post_params)
  render json: { post: @post }
else
 render :edit
end

这里是edit.html.erb

<%= react_component 'EditPost', { post: @post.as_json(only: [:id, :title, :body]) } %>

及以下是EditPost组件,位于assets / javascripts / components

class EditPost extends React.Component {

  constructor(props) {
    super(props)

  }

  render () {

    return (
      <div className="row">
        <div className="col-md-6 col-md-offset-3">
          <h3>Post</h3>
          <form>
            <div className="form-group">
              <label htmlFor="title">Title</label>
              <input type="text"
                     className="form-control"
                     placeholder="title"
                     ref="title" /> // here I can't set ref
            </div> <br />
            <div className="form-group">
              <label htmlFor="body">Body</label>
              <input type="text"
                     className="form-control"
                     placeholder="body"
                     ref="body" /> // here I can't set ref
            </div> <br />
          </form>
        </div>
      </div>
    )
  }
}
// if I uncomment below code I will get (Uncaught TypeError: can not read property 'string' of undefined
// EditPost.propTypes = {
//   title: React.PropTypes.string.isRequired,
//   body: React.PropTypes.string.isRequired
// }

这是我的github repo(https://github.com/Hano1388/react-rails-blog)随意克隆它以查看我得到的错误。谢谢,感谢您的帮助

1 个答案:

答案 0 :(得分:0)

React 16不再打包propTypes。尝试使用:

import PropTypes from 'prop-types'

更改为PropTypes而不是React.PropTypes

title: PropTypes.string.isRequired,