如何将方法作为道具传递给反应中的元素

Question

当我想将函数传递到React 中的函数组件时出现错误。问题出在哪里？

我已经开始学习React，我正在看教程。我有一个非常简单的函数组件，只有一个 <p> 元素，我的 App.js 中有一个简单的函数，一切正常，但是当我要将函数从 App.js 传递给我的函数组件时，我得到一个错误.

嗯，我做了和教程一样的事情。虽然，教程中的一切都很好（根据视频），但它对我不起作用。

谁能帮助我，让我知道问题出在哪里？

import React, { Component } from 'react';
import Person from './Person/Person';

import './App.css';

class App extends Component {
  state = {
    person: [
      { namd: "Ehsan", age: 36 },
      { name: "Mosen", age: 48 }
    ]
  }

  swichNameHandler = (newName) => {
    this.setState({
      person: [
        { name: newName, age: 37 },
        { name: "Mohsen", age: 49 }
      ]
    })
  }
  render() {
    return (
      <div className="App">
        <h1>this is react</h1>
        <button onClick={this.swichNameHandler.bind(this, "ehsan")}>Click Here</button>
        <Person
          name={this.state.person[0].name}
          age={this.state.person[0].age}
          click={this.swichNameHandler} />
        <Person
          name={this.state.person[1].name}
          age={this.state.person[1].age}
          click={this.swichNameHandler}> he is my brother.</Person>
      </div>
    );
  }
}

导出默认应用；

import React from 'react';

//Create a new Component
const person = (props) => {
    return (
        <div>
            <p onClick={props.click}> My name is {props.name} and I am {props.age} years old.</p>
            <p>{props.children}</p>
        </div>
    )
}

export default person; 

这是我点击 p 元素时的错误：

react-dom.development.js:57 Uncaught Error: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners、_dispatchInstances、nativeEvent、类型、目标、currentTarget、eventPhase、气泡、可取消、时间戳、 defaultPrevented, isTrusted, view, detail, screenX, screenY, clientX, clientY, pageX, pageY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, 按钮, 按钮, relatedTarget, motionX, 运动Y, isDefaultPrevented, isPropagationStopped})

如果您打算渲染一组子项，请改用数组。

Answer 1

在反应中，您应该将子元素包裹在父元素中，例如 div 等。

<div>
 <p>{props.children}</p>
</div>

Answer 2

问题是你的组件名称

更改您的组件名称：

// Wrong! This is a component and should have been capitalized:
const person = (props) => {
            return (
                <div>
                    <p onClick={props.click}> My name is {props.name} and I am {props.age} years old.</p>
                    <p>{props.children}</p>
                </div>
            )
        }

export default person; 

to: // and check your event like below : 

const Person = (props) => {
    return (
        <div>
            <p onClick={() => props.click(props.name)}> My name is {props.name} and I am {props.age} years old.</p>
            <p>{props.children}</p>
        </div>
    )
}

export default Person

组件名称应以大写开头，在 JSX 中，小写的标签名称被认为是 HTML 标签。但是，带有点（属性访问器）的小写标记名称不是。 demo

Answer 3

我认为你的状态有错字，其中 person[0] 应该是 "name" 但你写了 "namd" ，这导致 person[0].name 未定义，因此引发错误

 state = {
    person: [
      { namd: "Ehsan", age: 36 },
      { name: "Mosen", age: 48 }
    ]
  }

应该是

 state = {
    person: [
      { name: "Ehsan", age: 36 },
      { name: "Mosen", age: 48 }
    ]
  }

Answer 4

问题在于您正在使用的功能： 你的 App.js 文件

import React, { Component } from 'react';
import Person from './Person';

class App extends Component {
  state = {
    person: [
      { namd: "Ehsan", age: 36 },
      { name: "Mosen", age: 48 }
    ]
  }

  swichNameHandler = (newName) => {
    this.setState({
      person: [
        { name: newName, age: 37 },
        { name: "Mohsen", age: 49 }
      ]
    })
  }

  render() {
    return (
      <div className="App">
        <h1>this is react</h1>
        <button onClick={this.swichNameHandler.bind(this, "ehsan")}>Click Here</button>
        <Person
          name={this.state.person[0].name}
          age={this.state.person[0].age}
          click={this.swichNameHandler} />
      </div>
    );
  }
}

export default App;

这是你的 person.js

import React from 'react';

//Create a new Component
const person = (props) => {
    return (
        <div>
            <p> My name is {props.name} and I am {props.age} years old.</p>
            <button onClick={() => props.click('Your new name')}>Button</button>
            <p>{props.children}</p>
        </div>
    )
}

export default person; 

Answer 5

这是您的应用程序的工作代码笔。如果您想进行一些更改，请告诉我。

https://codepen.io/eseinv/pen/KJvoVB

const Person = props => {
return (
    <div>
        <p> My name is {props.name} and I am {props.age} years old.</p>
        <p>{props.children}</p>
    </div>
)
}

class App extends React.Component {
  state = {
    person: [
      { name: "Ehsan", age: 36 },
      { name: "Mohsen", age: 48 }
    ]
  }

switchNameHandler = newName => {
  this.setState({
    person: [
      { name: newName, age: 37 },
      { name: "Mohsen", age: 49 }
  ]
})
}
render() {
  return (
    <div className="App">
      <h1>this is react</h1>
      <button onClick={() => this.switchNameHandler("ehsan")}>Click Here</button>
      <div onClick={() => this.switchNameHandler('Name')}>
        <Person
          name={this.state.person[0].name}
          age={this.state.person[0].age}
        />
      </div>
      <div onClick={() => this.switchNameHandler('Name')}>
        <Person
          name={this.state.person[1].name}
          age={this.state.person[1].age} >
        he is my brother.</Person>
      </div>
    </div>
  );
}
}

ReactDOM.render(<App />, document.getElementById('app'))