Невозможно передать состояние родительского компонента его дочернему компоненту - PullRequest
Новая
       4

Невозможно передать состояние родительского компонента его дочернему компоненту

0 голосов
/ 26 января 2019

Я не могу передать родительское состояние его дочернему компоненту.

Я пытался передать полное родительское состояние ребенку, однако содержимое самого состояния было 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'));

Я ожидаю, что состояние или значение будет передано вдочерний компонент, и там будет доступно значение.

1 Ответ

0 голосов
/ 27 января 2019

Это самый простой способ понять это с моей точки зрения. Надеюсь, это поможет. 

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')

);
...