Question

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

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

嗯，我所做的与本教程相同。虽然，在教程中一切正常（根据视频），但对我而言不起作用。

有人可以帮助我，让我知道问题出在哪里吗？

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未捕获的错误：对象作为 React child（found：具有键{dispatchConfig，_targetInst， _dispatchListeners，_dispatchInstances，nativeEvent，类型，目标，currentTarget，eventPhase，气泡，可取消，timeStamp， defaultPrevented，isTrusted，视图，详细信息，screenX，screenY，clientX， clientY，pageX，pageY，ctrlKey，shiftKey，altKey，metaKey， getModifierState，按钮，按钮，relatedTarget，motionX， MovementY，isDefaultPrevented，isPropagationStopped}）

如果要渲染子级集合，请改用数组。

Answer 1

我认为您的状态有错别字，其中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 2

在react中，您应该将孩子包装在div等父元素中。

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

Answer 3

问题是您的组件名称

从更改组件名称：

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

如何在React中传递方法作为元素的道具

5 个答案: