ReactJS 中 props 是如何传递的答案

【问题标题】：How is props passed in ReactJSReactJS 中 props 是如何传递的
【发布时间】：2019-12-03 10:22:55
【问题描述】：

我正在尝试了解 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>
    )
}

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

谢谢

【问题讨论】：

你缺少反应导入。
错误信息告诉你为什么代码不起作用。您希望<h1>{agrs}</h1> 行输出什么？

标签： javascript reactjs react-native frontend

【解决方案1】：

首先，你有一个拼写错误。将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>
    )
}

另外，请确保添加道具验证（您的 linter 应该警告您）：

import PropTypes from "prop-types";

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

【讨论】：

【解决方案2】：

答案 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 即可。

【讨论】：

如果传递了字段，那么 Header 中的 prop 的值为 = 'Half Stack application development'。那我为什么要做props.args呢？
字段是指值，而不是变量或引用。为了清楚起见，我将编辑我的答案

【解决方案3】：

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

【讨论】：

'props'是必须使用的关键字吗？我不能把它改成 args 或其他东西
是的，组件接收一个对象，您可以对其进行解构以获取值

【解决方案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

【讨论】：