javascript - react两个独立组件如何通信？-PHP中文网问答

如下代码，LikeButton的动作如何操作LikeText的state？
或者调用changeLike方法？
新手求教。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
    <title>TEST</title>
  </head>
  <body>
    <h2>TEST</h2>
    <p id="container"></p>
    <p id="container2"></p>
    <script src="http://reactjs.cn/react/js/react.js"></script>
    <script src="http://reactjs.cn/react/js/JSXTransformer.js"></script>
    <script type="text/jsx">
      var LikeText = React.createClass({
        getInitialState: function() {
          return {liked: false};
        },
        changeLike: function() {
          this.setState({
            liked: !this.state.liked
          })
        },
        render: function() {
          var text = this.props.liked ? 'like' : 'haven\'t liked';
          return (
            <p>
              You {text} this. Click btn to toggle.
            </p>
          );
        }
      });
      React.render(
        <LikeText />,
        document.getElementById('container')
      );

      var LikeButton = React.createClass({
        getInitialState: function() {
          return {liked: false};
        },
        handleClick: function(event) {
          this.setState({liked: !this.state.liked});
        },
        render: function() {
          var text = this.state.liked ? 'unlike' : 'like';
          return (
            <button onClick={this.handleClick}>{text}</button>
          );
        }
      });
      React.render(
        <LikeButton />,
        document.getElementById('container2')
      );
    </script>
  </body>
</html>

全部回复(4)

PHP中文网2017-04-10 15:52:59 4楼

需要控制LikeText的那个state除了通过自身state控制外再加上props控制，LikeButton通过改变LikeText的props来控制，需要用到componentWillReceiveProps，代码参考如下：

    componentWillReceiveProps (nextProps) {
        if (nextProps.value !== this.state.value) {
            this.setState({
                value: nextProps.value
            });
        }
    },

    getInitialState() {
        return {
            value: this.props.value || defaultState
        };
    },

赞 +0

添加回复

巴扎黑2017-04-10 15:52:59 3楼

Redux
EventEmitter
React Context
将两个组件用父组件包裹起来

还有个小建议，React.render应该只调用一次。

伊谢尔伦2017-04-10 15:52:59 2楼

用EventEmitter，通过on注册事件，emit发射事件。

PHP中文网2017-04-10 15:52:59 1楼

怎么解决我也碰到了，主要分离组件是不想让主体太庞大，使用分离为两个单独的组件