切换无状态反应组件数组的可见性

Question

我试图简单地映射从 api 返回的一些数据，并为每个返回的对象创建一个无状态组件。我希望能够单击任何组件来切换其其余数据的可见性。

我已经尝试了很多方法来做到这一点并一直碰壁，我也搜索过堆栈溢出，但似乎找不到答案。

我通过使它们成为单独的类组件来使其工作，但是对于切换功能来说似乎有很多不必要的代码。

提前感谢您的任何帮助或见解，这里是我目前所拥有的快速细分。

为了澄清，这是一个简单的应用程序，让我了解如何使用 react 和外部 api，它不使用 redux。

获取处于类组件状态的用户

class PersonList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      resource: []
    };
  }

  async componentDidMount() {
    let fetchedData = await API_Call("people");
    this.setState({ resource: fetchedData.results });
    while (fetchedData.next) {
      let req = await fetch(fetchedData.next);
      fetchedData = await req.json();
      this.setState({
        resource: [...this.state.resource, ...fetchedData.results]
      });
    }
  }
}

然后映射结果并为每个结果渲染一个组件

render() {
  const mappedPeople = this.state.resource.map((person, i) => (
    <Person key={i} {...person} />
  ));
  return <div>{mappedPeople}</div>;
}

我是否可以让每个人组件成为无状态组件，并且能够单击它并显示其余数据？这是我目前拥有的。

class Person extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visibility: false
    };
  }
  toggleVisible = () => {
    this.setState(prevState => ({
      visibility: !prevState.visibility
    }));
  };
  render() {
    return (
      <div>
        <h1 onClick={this.toggleVisible}>{this.props.name}</h1>
        {this.state.visibility && (
          <div>
            <p>{this.props.height}</p>
          </div>
        )}
      </div>
    );
  }
}

再次提前感谢您提供任何见解或帮助！

Answer 1

您可以在父组件中保留一个对象visible，该对象将具有表示人员索引的键和表示人员是否可见的值。通过这种方式，您可以在单个对象中切换人员的索引，而不是使用有状态的子组件。

示例

class PersonList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      resource: [],
      visible: {}
    };
  }

  // ...

  toggleVisibility = index => {
    this.setState(previousState => {
      const visible = { ...previousState.visibile };
      visible[index] = !visible[index];
      return { visible };
    });
  };

  render() {
    const mappedPeople = this.state.resource.map((person, i) => (
      <Person
        key={i}
        {...person}
        visible={this.state.visible[i]}
        onClick={() => this.toggleVisibility(i)}
      />
    ));
    return <div>{mappedPeople}</div>;
  }
}

const Person = (props) => (
  <div>
    <h1 onClick={props.onClick}>{props.name}</h1>
    {props.visible && (
      <div>
        <p>{props.height}</p>
      </div>
    )}
  </div>
);

Answer 2

与@Tholle 的想法相似，但方法不同。假设person 对象中有一个id，我们将更改visibles 状态并切换ids。

class PersonList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      resource: this.props.persons,
      visibles: {},
    }
  }

  toggleVisible = id => this.setState( prevState => ({
    visibles: { ...prevState.visibles, [id]: !prevState.visibles[id] },
  }))

  render() {
    const mappedPeople =
      this.state.resource.map((person, i) =>
        <Person
          key={person.id}
          visibles={this.state.visibles}
          toggleVisible={this.toggleVisible}
          {...person}
        />
      )
      
    return (
      <div>
        {mappedPeople}
      </div>
    )
  }
}

const Person = (props) => {
  const handleVisible = () =>
    props.toggleVisible( props.id );
  
  return (
    <div>
      <h1 onClick={handleVisible}>
        {props.name}</h1>
      {props.visibles[props.id] &&
        <div>

          <p>{props.height}</p>
        </div>
      }
    </div>
  );
}

const persons = [
  { id: 1, name: "foo", height: 10 },
  { id: 2, name: "bar", height: 20 },
  { id: 3, name: "baz", height: 30 },
]

const rootElement = document.getElementById("root");
ReactDOM.render(<PersonList persons={persons} />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 3

您可以确保您的“this.state.resource”数组在每个对象上都有一个可见性标志：

this.state.resource = [
   { ..., visibility: true },
   { ..., visibility: false}
   ...
];

通过稍微修改您的 fetch 来做到这一点。

let fetchedData = await API_Call("people");
this.setState({ 
    resource: fetchedData.results.map(p => ({...p, visiblity: true}))
});

将您的 Person 组件合并回 PersonList（就像您尝试做的那样），然后在您的 onclick 上执行以下操作：

onClick={() => this.toggleVisible(i)}

更改 toggleVisible() 函数以执行以下操作。

toggleVisible = (idx) => {
    const personList = this.state.resource;
    personList[idx].visibility = !personList[idx].visibility;
    this.setState({ resource: personList });      
}

所以现在，当你在做的时候：

this.state.resource.map((person, i) => ...

...您可以访问“person.visibility”，并且您的 onclick 将切换被点击的特定索引。

我认为这直接回答了你的问题，但是......

我会继续将 Person 分解成它自己的组件，这确实是个好习惯！

除了更好的组织之外，主要原因之一是避免道具中的 lamdas（我实际上在上面做了）。由于您需要为每个索引执行一次 onClick，因此您要么需要使用数据属性，要么实际上为每个 person 项目使用 React.Component。 你可以在这里研究一下： https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

顺便说一句，您仍然可以像这样创建不是“React.Component”的“组件”：

import React from 'react';

const Person = ({ exProp1, exProp2, exProp3}) => {
    return <div>{exProp1 + exProp2 + exProp3}</div>
}

Person.propTypes = {
    ...
}

export default Person;

如您所见，没有任何东西从 React.Component 继承，因此您可以两全其美（创建组件而不创建“组件”）。我倾向于这种方法，而不是将所有内容都内联。但是，如果您的应用程序不是特别大，而您只是想完成它，那么使用第一种方法并不是非常糟糕。