Question

我有一个名为Gender的无状态组件，我正在父类组件App中调用它，我想传递users数组，以便可以过滤该数组计算组件Gender中的男性和女性人数。

let Gender = (mCount, fCount) => {
return (
    <div>
        <div>
            <span>Male</span>
            <span>{mCount}</span>
        </div>
        <div>
            <span>Females</span>
            <span>{fCount}</span>
        </div>
    </div>
);
};

class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        users: []
    };
}

componentDidMount() {
    fetch(URL)
        .then(response => response.json())
        .then(data => this.setState({ users: data }));
}

render() {
    const { users } = this.state;
    return (
        <div classname="wrapper">
            <Gender />
        </div>
    );
}
}

Answer 1

您可以像往常一样携带道具：

 <Gender users={users} />

并更新您的Gender组件：

const Gender = (mCount, fCount, users) => {
  return (
    <div>
        <div>
            <span>Male</span>
            <span>{mCount}</span>
        </div>
        <div>
            <span>Females</span>
            <span>{fCount}</span>
        </div>
    </div>
  );
};

ReactJs-将数组从父组件传递到子组件

1 个答案: