无法将父组件的状态传递给其子组件

Question

我无法将父级的状态传递给其子组件。

我尝试将整个父母的状态传递给孩子，但是，状态本身的内容是undefined的。另外，我也尝试过类似的使用道具，但效果也不好。

---

//parent.js
state = {
  messages: [],
  roomId: this.props.navigation.getParam('roomId')
}
renderImageAction = () => {
  return <ImageAction roomId={this.state.roomId} />
}
return(<GiftedChat renderActions={this.renderImageAction}/>)

---

//child.js
DataBase.saveImage(this.props.roomId).then(alert('done'));  

我希望状态或值将传递给子组件，并且该值将可用。

Answer 1

从

我的角度来看，这是理解这件事的最简单方法。希望这有帮助。

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fieldVal: ""
    }
  }
  onUpdate = (val) => {
    this.setState({
      fieldVal: val
    })
  };
  render() {
    return (
      <div>
        <h2>Parent</h2>
        Value in Parent Component State: {this.state.fieldVal}
        <br/>
        <Child onUpdate={this.onUpdate} />
        <br />
        <OtherChild passedVal={this.state.fieldVal} />
      </div>
    )
  }
}
class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fieldVal: ""
    }
  }
  update = (e) => {
    console.log(e.target.value);
    this.props.onUpdate(e.target.value);
    this.setState({fieldVal: e.target.value});
  };
  render() {
    return (
      <div>
        <h4>Child</h4>
        <input
          type="text"
          placeholder="type here"
          onChange={this.update}
          value={this.state.fieldVal}
        />
      </div>
    )
  }
}
class OtherChild extends React.Component {
  render() {
    return (
      <div>
        <h4>OtherChild</h4>
        Value in OtherChild Props: {this.props.passedVal}
      </div>
    )
  }
}
React.render(
  <Parent />,
  document.getElementById('react_example')
);