react的state不会自动继续传递吗?

monsterzzz
  • 131
   var App = React.createClass({
        getInitialState : function () {
            return {
                value : 'Heading\n=======\n\nSub-heading\n-----------\n \n### Another deeper heading\n \nParagraphs are separated\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a  \nline break\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n\nShopping list:\n\n  * apples\n  * oranges\n  * pears\n\nNumbered list:\n\n  1. apples\n  2. oranges\n  3. pears\n\nThe rain---not the reign---in\nSpain.\n\n *[Herman Fassett](http://freecodecamp.com/hermanfassett)*'
            }
        },
        upDate : function (msg) {
           this.setState({
               value : msg
           })
        },
        render : function () {
            console.log(this.state.value)
            return (
                    <div className="row" style={{marginTop: 30 + "px"}}>
                        <TextArea value= { this.state.value } upDate = {this.upDate}/>
                        <Display value = { this.state.value }/>
                    </div>
            )
        }
    })
    var TextArea = React.createClass({
        getInitialState : function () {
            return {
                value : this.props.value
            }
        },
        handleChange : function (e) {
            this.props.upDate(e.target.value)
            this.setState({
                value : e.target.value
            })
        },
        render : function () {
            return (
                    <div className="col-sm-5 col-sm-offset-1">
                        <textarea ref='mytextArea' className="form-control" rows="27" style= {{resize: "none"}} value={this.state.value} onChange={this.handleChange}></textarea>
                    </div>
            )
        }
    })
    var Display = React.createClass({
        getInitialState : function () {
            return {
                value : this.props.value
            }
        },
        render : function () {
            return (
                    <div className="col-sm-4" style={{marginLeft: 60 + "px"}}>
                        {this.state.value}
                    </div>
            )
        }
    })
    React.render(<App/>,document.getElementById("container"))

第一次传值是把父组件的状态传递给每个组件,然后子组件的输入被更改,父组件的状态也被更改,不会继续传递给Display组件吗?

回复
阅读 1.9k
3 个回答

首先marginTop: 30 + "px"可以直接写marginTop: "30px"

你把父组件的状态作为字组件的状态,这个方法不建议用,因为react的加载方式决定了,你把父组件的state作为组件的state,只会渲染一次,不管你的父组件的状态变化多少次,子组件的state 还是第一次的值。除非你在子组件里面进行更改子组件的value,用this.setState

这样说你就可以明白了,我们采用react生命周期来解决这个问题

componentWillReceiveProps(nextProps) {
   console.log(nextProps)
 //主要是写给你看里面   <TextArea value= { this.state.value } upDate = {this.upDate}/> 
//所有的属性都在nextProps
//所以这个时候你在调用  
  this.setState({value:nextProps.value})

}

这样应该就可以了

getInitialState 这个方法只在组件mount时被执行。由于你多次渲染时,只是改变了子组件的 props,子组件一直是 mounted 的状态,所以不会再去执行 getInitialState。@JeremyChen 已经给出了可选方案。不过,着实没必要让 TextArea 和 Display 都具有 state,state 放在closest common ancestor 里是 react 的推荐做法:https://facebook.github.io/re...。上层组件具有 state,并将其传给下层组件,下层组件只管取 props 的数据做显示就可以了。下层组件需要更新数据,也是通过上层组件传下来的回调函数进行。

react 是单向数据流, state 只能由父组件传递给子组件

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏