Question

我有一个非常简单的React应用程序。我试图将Parent.jsx中myArray的数据传递给Child.jsx

Child.jsx：

    import React from 'react';

    export const Child = (props) => {
      return <h1>{ myArray[0].name }</h1>;
    };

Parent.jsx：

    import React from 'react';
    import {Child} from './child';

    export const Parent = (props) => {

        const myArray = [
          {
            name: "tom smith",
            age: "99"
          },
          {
            name: "alex",
            age: "12"
          }
        ];

        return <div>
            <h1>Parent heading</h1>
                <Child />
                <h2>Parent footer</h2>
            </div>;

    };

app.jsx：

    import React from 'react';
    import {Parent} from './parent';

    export default class App extends React.Component {
      render() {
        return (
          <div>
            <Row />
          </div>
        )
      }
    }

Answer 1

导入来自＆＃39;反应＆＃39 ;;

的反应

export const Child = (props) => {
  return <h1>{ props. myArray[0].name }</h1>;
};

Answer 2

您的父组件需要将数组传递给子组件。

e.g。

   const myArray = [
      {
        name: "tom smith",
        age: "99"
      },
      {
        name: "alex",
        age: "12"
      }
    ];

return <div>
    <h1>Parent heading</h1>
        <Child childArray={myArray} />
        <h2>Parent footer</h2>
    </div>;

};

然后在子组件中

export const Child = (props) => {
  return <h1>{ props.childArray[0].name}</h1>;
};

将数据传递给子React组件？

2 个答案: