Question

我正在构建一个简单的仪表板。我有一个对象字典（dashboardItems），其中包含要显示的仪表板项（<SubComponent1 />或<SubComponent 2/>，一个帮助函数从字典中返回组件（getDashBoardContent()），以及最后我有仪表板组件（<DashBoard />）。我通过一个简单的状态<SubComponent 2/>向optionId传递道具：

const dashboardItems = [
  {
    id: 0,
    content: <SubComponent1 />
  },
  {
    id: 1,
    content: <SubComponent2 options={this.state.optionId} />
  }
];

const getDashBoardContent = listItemIndex => {
  return dashboardItems[listItemIndex].content;
};

class DashBoard extends Component {
  state = {
    listItemIndex: 0,
    optionId: 0,
  };

  handleClick = (item, id) => {
    this.setState({
      listItemIndex: item,
      optionId: id,
    });
  };

  render() {
    return
    ...

问题是React抛出的错误是它无法读取属性options={this.state.optionId}。我假设原因是字典dashboardItems位于定义状态的Dashboard组件之外。

我应该使用哪些策略？

（注意：虽然我在我的应用程序中使用Redux，但我不想仅用它来跟踪要在仪表板中显示的项目）。

Answer 1

您可以使用React条件呈现属性，而不是使用函数来设置和初始化组件：

class DashBoard extends Component {
  state = {
    listItemIndex: 0,
    optionId: 0,
  };

  handleClick = (item, id) => {
    this.setState({
      listItemIndex: item,
      optionId: id,
    });
  };

  render() {
  {listItemIndex, optionid} = this.state
    return ()
    {if desired state: <SubComponent1 /> : 
 <SubComponent2 options={this.state.optionId} />
//If desired state render component one else render the other component 
    ...
}

Answer 2

您可以将仪表板列表中的组件包装成如下函数：

const dashboardItems = [
  {
    id: 0,
    content: () => <SubComponent1 />
  },
  {
    id: 1,
    content: (state) => <SubComponent2 options={state.optionId} />
  }
];

class DashBoard extends Component {
   ...

   render() {
     const item = dashboardItems.find(x => x.id === this.state.listItemIndex);

     return (
       <div>
         {item.content(this.state)}
       </div>    
     );
   }
}

ReactJS使组件状态在组件定义

2 个答案: