React实现双向数据流

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React实现双向数据流相关的知识,希望对你有一定的参考价值。

<div id="app"></div>

<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
<!-- 引入React的一个扩展 -->
<script src="bower_components/react/react-with-addons.min.js"></script>
<script src="lib/babel-core/browser.min.js"></script>
<script type="text/babel">
    var EasyForm = React.createClass({
        // 引入mixins
        mixins: [React.addons.LinkedStateMixin],
        getInitialState: function () {
            return {
                message: react is awesome,
                isReactAwesome: true
            }
        },
        render: function () {
            return (
                <div>
                    <h1>我想说:{this.state.message}</h1>
                    <h2>React是不是很好用? {this.state.isReactAwesome ? 非常好用! : 一般般。。。}</h2>
                    <input type="text" valueLink={this.linkState(message)}/>
                    <br/>
                    <input type="checkbox" checkedLink={this.linkState(isReactAwesome)}/>
                    <br/>
                    <SubComp {...this.props}/><!--spread-->
                </div>
            );
        }
    });

    var SubComp = React.createClass({
        render: function () {
            return (
                <div>
                    <h3>这是个子组件哦</h3>
                    <SubSubComp {...this.props}/>
                </div>
            )
        }
    });

    var SubSubComp = React.createClass({
        render: function () {
            return (
                <div>
                    <p>你想说什么?</p>
                    <input type="text" valueLink={this.props.messageLink}/>
                    <p>你稀罕React么?</p>
                    <input type="checkbox" checkedLink={this.props.likeLink}/>
                </div>
            )
        }
    });

    ReactDOM.render(
        <EasyForm/>,
        document.getElementById(app)
    );
</script>

 

以上是关于React实现双向数据流的主要内容,如果未能解决你的问题,请参考以下文章

React实现双向数据流

React 如何实现它的双向数据绑定?

Vue,和React,实现的双向数据绑定效果

React中双向数据绑定基本原理

在react中实现一个简单双向数据绑定

react常用面试题再也不用担心面试被pass掉