Question

我已经按照一系列道具定义了

Footer.propTypes = PropTypes.arrayOf(
  PropTypes.content({
    title: PropTypes.string,
    click: PropTypes.func
  })
)

我现在如何创建一个const来初始化此props数组，然后将其传递给组件。

Answer 1

假设您的组件名称类似UserInfo

将多个道具传递给类似如果你有一个像这样的数组

let arr = [{ title: "", click: "" }, {title: "", click: ""}]
<UserInfo fname={"Xyz"} lname={"Pqr"} designation={"Developer"} arrData={arr} />

在UserInfo组件中，您可以使用渲染或类似的任何方法

let fname = this.props.fname;
let lname = this.props.lname;
let designation = this.props.designation;
let arrData = this.props.arrData;

或

let { fname, lname, designation, arrData } = this.props;

Answer 2

我认为最简单的方法之一是在父级中创建JSON，然后从子级访问键，如下所示：

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor() {
    super();
    this.state = {
      obj: {
        name: "Joe",
        age: 15,
        email: "joe@gmail.com"
      }
    };
  }
  render() {
    return (
      <div>
        <Child obj={this.state.obj}/>
      </div>
    );
  }
}

function Child(props) {
  return (
    <div>
      {props.obj.name}<br/>
      {props.obj.age}<br/>
      {props.obj.email}
    </div>
  )
}

render(<App />, document.getElementById('root'));

Demo

如何将道具列表传递给组件

2 个答案: