react中不依赖redux等这些进行状态管理的话，主要是有父组件给子组件传值，子组件给父组件传值，还有兄弟组件之前的传值

这是一个评论功能的小栗子，非常适合来说明组件之前传值的问题
首先上个项目文件目录结构

这里一共有四个组件Comment是最外层的容器组件，CommentInput是负责输入，
其余两个负责评论展示

子组件给父组件传值

先理解一下定义：react中state改变了，组件才会update。父写好state和处理该state的函数，同时将函数名通过props属性值的形式传入子，子调用父的函数，同时引起state变化。子组件要写在父组件之前
子组件与父组件之前存在继承的关系，因此子组件可以调用父组件的方法。

class CommentInput extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      username: "",
      content: ""
    }
  }
  show = () => {
    if (this.props.onSubmit) {
      const { username, content } = this.state
      this.props.onSubmit({username, content})
    }
    this.setState({ content: "" })
  }
  handleContent = (e) => {
    this.setState(
      { content: e.target.value }
    )
  }
  handleUserName = (e) => {
    this.setState(
      { username: e.target.value }
    )
  }
  render() {
    return (
      <div className="comment-input">
        <div className="input-filed">
          <span className="input-filed-name">用户名：</span>
          <div className="input-filed-content">
            <input type="text" value={this.state.username} onChange={this.handleUserName} />
          </div>
        </div>
        <div className="input-filed">
          <span className="input-filed-name">评论内容：</span>
          <div className="input-filed-content">
            <textarea value={this.state.content} onChange={this.handleContent} />
          </div>
        </div>
        <div className="input-filed-btn">
          <button onClick={this.show}>发布</button>
        </div>
      </div>
    );
  }
}

注意类中的show()方法

show = () => {
    if (this.props.onSubmit) {
      const { username, content } = this.state
      this.props.onSubmit({username, content})
    }
    this.setState({ content: "" })
  }

同样我们给出父组件CommentApp的代码

class CommentApp extends Component {
  constructor(props) {
    super(props)
    this.state = {
      comments: []
    }
  }
  handleSubmit = (comment) => {
    if (!comment) return
    if (!comment.username) return alert('请输入用户名')
    if (!comment.content) return alert('请输入评论内容')
    this.state.comments.push(comment)
    this.setState(
      {
        comments: this.state.comments
      }
    )
  }
  render() {
    return (
      <div className="wrapper">
        <CommentInput onSubmit={this.handleSubmit} />
        <CommentList comments={this.state.comments} />
      </div>
    );
  }
}

同样请注意父组件中的onSubmit={this.handleSubmit} 方法，是不是发现了子组件中有this.props.onSubmit这么个语句,这个原理就是子组件给父组件props传值时通过父组件定义的方法去改变父组件的state

父组件给子组件传值

相较于子组件给父组件传值来说，父组件给子组件传值就简单的多了，我们都知道class有构造函数constructor，通常我们是这么写的。以父组件CommentApp为例

constructor(props) {
    super(props)
    this.state = {
      comments: []
    }
  }

其中的props就是从父组件中继承的，里面可以有属性、方法。那父组件是怎么给子元素传入的呢？继续往下看：还是父组件CommentApp为例

render() {
    return (
      <div className="wrapper">
        <CommentInput onSubmit={this.handleSubmit} />
        <CommentList comments={this.state.comments} />
      </div>
    );
  }

代码中，父组件给CommentList传了一个叫comments={this.state.comments} comment的属性，再看子组件CommentList中

class CommentList extends React.Component {
    static defaultProps = {
        comments: []
    }
    render() {
        return (
            <div>
                {this.props.comments}
                {this.props.comments.map((comment, i) => {
                    return (
                        <Comment comment={comment} key={i} />
                    )
                })}
            </div>
        )
    }
}

CommentList组件中使用this.props.comments 就能把comments取出，是不是简单许多。

兄弟组件传值

只听说过父子组件之间的传值，却是不知道兄弟组件怎么传值，是不是需要用到第三方的状态管理呢？事实上，组件的状态多了对于我们来说并不是什么好事，因为状态多容易产生混乱，虽然说第三方的状态管理能我们省下不少事，但是也不能盲目的使用。如果组件之间不是多层嵌套，传值可以直接react解决
这个例子中CommentsList和CommentsInput就是一个兄弟组件，公共附件即为CommentApp。因此CommentApp就是两个子组件“沟通”的桥梁

回头看，CommentInput 需要把输入的内容在CommentIist中显示处理啊，就需要每次都把内容传给CommentIist。但是CommentInput 先把值传给了父元素CommentApp
CommentInput中片段

show = () => {
    if (this.props.onSubmit) {
      const { username, content } = this.state
      this.props.onSubmit({username, content})
    }
    this.setState({ content: "" })
  }

content就是我们获取的内容。
CommentApp代码片段

render() {
    return (
      <div className="wrapper">
        <CommentInput onSubmit={this.handleSubmit} />
        <CommentList comments={this.state.comments} />
      </div>
    );
  }

这就是兄弟组件之间的传值方式。
本文的例子来自于《React.js 小书》，学习过程中觉得这个例子可以很好的说明组件之间的传值关系，如需源码，可以留言哈，待我“收拾”下GitHub仓库项目后放在留言区
这是第一次写技术博客，如有错误欢迎指正，有什么问题也可以给我留言哦！