Question

我试图了解Props在React中的工作方式。以下代码给出了错误-Error: Objects are not valid as a React child (found: object with keys {args})

const App = () => {
  const course = 'Half Stack application development'

  return (
      <div>
        <Header args={course}/> // Will an object be passed or just the string?
      </div>
  )
}

const Header = (agrs)=>{
    console.log(agrs)
    return (
        <div>
        <h1>{agrs}</h1>
        </div>
    )
}

传递道具时，传递的是封装字段的Object还是传递字段的值？
上面的代码为什么不起作用？

谢谢

Answer 1

答案1：值作为键传递，其名称与您在props对象中为其分配的字段的名称相同。

答案2：

const Header = (props)=>{
    console.log(props.agrs)
    return (
        <div>
        <h1>{props.agrs}</h1>
        </div>
    )
}

上面的代码可以正常运行。

替代2：

const Header = ({agrs})=>{
    console.log(agrs)
    return (
        <div>
        <h1>{agrs}</h1>
        </div>
    )
}

这也可以正常运行。它使用对象分解，因此您不必使用props.agrs，而args可以正常工作。

Answer 2

const App = () => {
  const course = 'Half Stack application development'

  return (
      <div>
        <Header args={course}/> // Will an object be passed or just the string?
      </div>
  )
}

const Header = ({agrs})=>{
    console.log(agrs)
    return (
        <div>
        <h1>{agrs}</h1>
        </div>
    )
}

使用上述或

的对象分解

const Header = (props)=>{
        console.log(props.agrs)
        return (
            <div>
            <h1>{props.agrs}</h1>
            </div>
        )
    }

在Components and Props处找到更多信息。查找有关Destructuring

的更多信息

Answer 3

首先，您有一个拼写错误。将agrs替换为args。其次，道具作为对象（字典）传递，因此您有以下两种选择之一：

const Header = (props) =>{
    console.log(props.args)
    return (
        <div>
            <h1>{props.args}</h1>
        </div>
    )
}

或object destructuring：

const Header = ({args}) =>{
    console.log(args)
    return (
        <div>
            <h1>{args}</h1>
        </div>
    )
}

另外，请确保添加道具验证（您的短毛绒应该对此发出警告）：

import PropTypes from "prop-types";

Header.propTypes = {
  args: PropTypes.string.isRequired
};

Answer 4

        import React from 'react';

    class App extends React.Component {
       render() {
          return (
             <div>
                <h1>{this.props.headerProp}</h1>
                <h2>{this.props.contentProp}</h2>
             </div>
          );
       }
    }
    export default App;


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

enter image description here

如何在ReactJS中传递道具

4 个答案: