Question

我是第一次在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函数？

Answer 1

您始终使用“ hello world3”来调用updateString。这就是您没有看到它的原因。根据参数设置回调triggerUpdateString。像这样：

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

然后，它应该适用于您作为参数传递的任何内容。谢谢，欢迎您提供反馈。

Answer 2

这里您要将局部变量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>

ReactDOM将带有参数的函数传递给子组件

2 个答案: