ReactDOM передает функцию с параметрами в дочерний компонент - PullRequest
Новая
       10

ReactDOM передает функцию с параметрами в дочерний компонент

0 голосов
/ 29 октября 2018

Я программирую в React впервые, и у меня есть проблема, которую я не понимаю, как я могу решить без изменения всего, но такое ощущение, что должно быть решение.

У меня есть этот код в index.js 

export var updateString = function (test3){
    var test1 = 'hello world1'
    //do something mother
}

ReactDOM.render(<Child triggerUpdateString={() => updateString ('hello world3')}/>, document.getElementById('child'));

А потом я получил следующий код в child.js 

export default class Child extends React.Component {
  handleString = event => {
    event.preventDefault()
    this.props.triggerUpdateString('hello world2')
    //do something child }}

У меня нет проблем с получением «hello world1» или «hello world3» в части «сделай что-нибудь, мать», но я не могу получить строку «hello world2».

Как получить строку от дочернего объекта до функции updateString?

Ответы [ 2 ]

0 голосов
/ 29 октября 2018

Здесь вы устанавливаете локальную переменную test1 в постоянное значение, но передаваемый вами аргумент (test3) никогда нигде не используется: 

export var updateString = function (test3){
    var test1 = 'hello world1'
    //do something mother
}

Я думаю, что вы хотели это сделать, но, не видя ваш код, я просто предполагаю, что вы используете оба значения где-то в реальности: 

export var updateString = function (test3){
    var test1 = test3;
    //do something mother
}

Поскольку мы только что тестируем здесь, давайте изменим это на использование console.log, чтобы мы получили значимый результат в примере кода: 

export var updateString = function (test3){
    console.log(test3);
    //do something mother
}

Теперь, поскольку мы изменили нашу функцию updateString, нам не нужно заключать ее в дополнительные вызовы функций, чтобы передать ее: 

<Child triggerUpdateString={() => updateString ('hello world3')}/>

Вы можете просто сделать это: 

<Child triggerUpdateString={updateString}/>

Потому что мы просто вызываем его и в любом случае передаем значение: 

this.props.triggerUpdateString('hello world2')

Я надеюсь, что этот рабочий пример поможет вам, дайте мне знать, если я что-то неправильно понял: 

const updateString = function (newValue){
    console.log("new value:", newValue);
}

class Child extends React.Component {
  handleString = event => {
    event.preventDefault()
    this.props.triggerUpdateString('hello world2');
  }
  render() {
      return (<button onClick={this.handleString}>Test</button>)
  }
}

ReactDOM.render(<Child triggerUpdateString={updateString} />, document.getElementById('child'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="child"></div>
0 голосов
/ 29 октября 2018

Вы вызываете updateString всегда с "hello world3". Вот почему вы этого не видите. сделайте ваш callback triggerUpdateString на основе аргументов. Примерно так: 

ReactDOM.render(<Child triggerUpdateString={(str) => updateString (str)}/>, 
 document.getElementById('child'));

Тогда это должно работать для всего, что вы передаете в качестве аргументов. Спасибо. Отзывы приветствуются.

...