ReactDOM передает функцию с параметрами дочернему компоненту
Я впервые программирую на 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» в части «do something mother», но я не могу получить строку «hello world2».
Как мне получить строку от дочернего элемента до функции updateString?
Ответы 2
Вы всегда вызываете updateString с «hello world3». вот почему вы этого не видите. сделайте свой обратный вызов triggerUpdateString на основе аргументов. Что-то вроде этого:
ReactDOM.render(<Child triggerUpdateString = {(str) => updateString (str)}/>,
document.getElementById('child'));
Тогда он должен работать для всего, что вы передаете в качестве аргументов. Спасибо. Отзывы приветствуются.
Здесь вы устанавливаете для локальной переменной 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.info, чтобы получить значимый результат в примере кода:
export var updateString = function (test3){
console.info(test3);
//do something mother
}
Теперь, поскольку мы изменили нашу функцию updateString, нам не нужно заключать ее в дополнительные вызовы функций, чтобы передать ее:
<Child triggerUpdateString = {() => updateString ('hello world3')}/>
Вы можете просто сделать это:
<Child triggerUpdateString = {updateString}/>
Потому что мы просто вызываем его и все равно передаем значение:
this.props.triggerUpdateString('hello world2')
Надеюсь, этот рабочий пример поможет вам, дайте мне знать, если я что-то неправильно понял:
const updateString = function (newValue){
console.info("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>