Javascript 道具是如何在反应器中传递的

我试图了解道具在React中是如何工作的。以下代码给出错误-

错误：对象作为React子对象无效（找到：具有键{args}的对象）

const-App=（）=>{
const课程=‘半堆栈应用程序开发’
返回(
//将传递对象还是仅传递字符串？
)
}
常量头=（agrs）=>{
控制台日志（agrs）
返回(
{agrs}
)
}

传递道具时，传递的是封装字段的对象，还是只传递字段值

为什么上面的代码不起作用

---

谢谢

回答1：值作为键传递，与您在props对象中分配给它的字段同名

答复2：

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

const头=（道具）=>{
console.log（props.agrs）
返回(
{props.agrs}
)
}

上面的代码可以正常运行

答复2的备选案文：

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

const头=（{agrs}）=>{
控制台日志（agrs）
返回(
{agrs}
)
}

这也将运行良好。 它使用对象解构，因此您不必使用props.agrs，而只使用args就可以了

const-App=（）=>{
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课程=‘半堆栈应用程序开发’
返回(
//将传递对象还是仅传递字符串？
)
}
常量头=（{agrs}）=>{
控制台日志（agrs）
返回(
{agrs}
)
}

像上面或下面那样使用对象分解

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

const头=（道具）=>{
console.log（props.agrs）
返回(
{props.agrs}
)
}

在这里找到更多。 从“React”中查找有关导入React的更多信息； 类应用程序扩展了React.Component{ render（）{ 返回( {this.props.headerProp} {this.props.contentProp} ); } } 导出默认应用程序； 从“React”导入React； 从“react dom”导入react dom； 从“/App.jsx”导入应用程序；

---

ReactDOM.render（

首先，您有拼写错误。将

agrs

替换为

args

。其次，道具作为对象（字典）传递，因此您有两个选项之一：

const头=（道具）=>{
console.log（props.args）
返回(
{props.args}
)
}

或：

const头=（{args}）=>{
console.log（args）
返回(
{args}
)
}

此外，请确保添加道具验证（您的门楣应该警告您这一点）：

从“道具类型”导入道具类型；
Header.propTypes={
args:PropTypes.string.isRequired
};

您缺少react导入。错误消息会告诉您代码不起作用的原因。您对行

{agrs}的期望是什么

要输出吗？如果传递了字段，则标题中的prop值为=“半堆栈应用程序开发”。那么为什么我需要执行props.args？字段的意思是值，而不是变量或引用。我将编辑我的答案，以确定“props”是必须使用的关键字吗？我不能将其更改为args或其他什么吗？是的，组件t接收一个对象，您可以对其进行分解以获得值

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

        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;