Question

如何在 React 组件中传递 props?

2021-06-03

63

reactjs

我正在使用 reactjs。我有一个组件，写得像这样：

import MyComponent from './Component';


 const test = [
    {
      id: '1',
      Component: FirstComponent,
    },
    {
      id: '2',
      Component: MyComponent,
    },
  ];

  return (
    <Demo
      components={test} 
    />
  );

在这种情况下，我该如何为 MyComponent 传递 props？

Answer 1

如果您需要将其他 props 传递给 MyComponent ，则应在配置中定义一个匿名组件，以便将新 props 传递给子组件。不要忘记将 props 也传递给子组件。

const test = [
  {
    id: '1',
    Component: FirstComponent,
  },
  {
    id: '2',
    Component: (props) => (
      <MyComponent {...props} prop1={prop1} prop2={prop2} etc />
    ),
  },
];

Answer 2

首先我想介绍一下什么是 props。props 表示你通过 jsx 代码传递给函数的属性，或者我们称之为纯函数。让我给你一个像 H1 标签这样的小元素的演示。

我正在创建一个 h1.js 文件。

import React from 'react';

// arrow function that get props
const H1 = (props) => {
     return '<h1>{props.text}</h1>';
}
export default H1;

现在当你想使用这个函数时只需导入并传递 props 即可，如

#Main.js

import React from 'react';
import H1 from './h1.js';
class Main extends React.Component{
   constructor() {
     super();
   }
   render(){
     return(
        <>
          <H1 text="pass what you want"></H1>
        </>
     );
   }
}

所以你可能会知道它是如何工作的 ;)