如何传递的方法的道具在反应的元件

Question

我得到一个错误，当我想给一个函数传递到React我的功能组件。问题出在哪儿？

我已经开始学习React，我看的教程。我有很简单的功能部件只有一个<p>元素，也是我在App.js有一个简单的功能，一切工作正常，但是当我准备从App.js我的函数传递给我的功能组件，我得到一个错误。

嗯，我也做了同样的教程。虽然，一切都在本教程OK（根据视频），它不会为我工作。

可能有人帮助我，让我知道是什么问题？

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元素上的错误：

反应-dom.development.js：57未被捕获的错误：对象是不作为阵营子有效（实测值：连键{dispatchConfig，_targetInst，_dispatchListeners，_dispatchInstances，nativeEvent，类型，目标，currentTarget当前，的EventPhase，气泡，或取消，Timestamp对象，defaultPrevented，isTrusted，视图，详细地说，screenX，screenY，clientX，clientY，pageX属性，pageY，中ctrlKey，Shift键，，方altKey，metaKey，getModifierState，按钮，按钮，relatedTarget，movementX，movementY，isDefaultPrevented，isPropagationStopped}）

如果你的意思是使孩子们的集合，使用数组来代替。

Answer 1

我认为有错字在你的状态，其中人[0]应该是“名”，但你写“NAMD”，这会导致人[0]。名称是不确定的，因此引发错误

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

应该

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

Answer 2

在反应，你应该换父元素中的儿童，如DIV等

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

Answer 3

问题是，你正在使用的功能：您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 4

问题是你的组件名称

从改变你的组件名称：

// 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 5

这是codepen您的应用程序的工作。如果你想做出一些改变让我知道。

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