如何在初始渲染时传递自定义道具

Question

我认为问这个问题可能很愚蠢，但请相信我，我没有找到答案。我正在通过 props 将数据传递给子组件，但我卡住了并收到错误。通常，我在表单提交上传递数据（我的意思是当用户键入内容并点击提交时）我通过道具在子组件中显示数据，但在应用程序的初始呈现时我收到错误 props is undefined 。其实我知道 defaultProps 但我认为它可能在 class 基础组件中。我想在功能组件中做类似 defaultProps 的事情，我被卡住了，有人可以帮助我实现我的目标吗？

代码

 import React from "react";

const ViewCourse = () => {
  return (
    <div>
      {this.props.courses.map(newData => (
        <div>{newData.title}</div>
      ))}
    </div>
  );
};

export default ViewCourse;

Answer 1

您正在使用函数组件。你必须在争论中获得支持。

const ViewCourse = (props) => {
  // use props here.
};

Answer 2

在功能组件中 props 是参数。

import React from "react";

const ViewCourse = (props) => {
  return (
    <div>
      {props.courses.map(newData => (
        <div>{newData.title}</div>
      ))}
    </div>
  );
};

export default ViewCourse;

Answer 3

您可以使用classname.defaultProps来分配初始值。此外，要访问功能组件中的道具，您必须将其作为参数传递。

import React from "react";

const ViewCourse = (props) => (
  <div>
    {props.courses.map(newData => (
      <div>{newData.title}</div>
    ))}
  </div>
);

export default ViewCourse;

ViewCourse.defaultProps = {
  courses: [],
}

如何在初始渲染时传递自定义道具

How to pass down custom props on initial render

javascript

ecmascript-6

reactjs

react-redux

ecmascript-2016