Question

我对React很陌生，所以这可能是一个愚蠢的问题。但是我正在制作标签。我决定将选项卡的内容分成单独的const。问题是，现在我不能再在类部分中声明的选项卡内容中引用任何内容。我显然做错了。有人可以看看一下，让我知道我需要在这里解决吗？

这是我的代码的基本轮廓。如何在GeneralContent const中引用公司？我需要在其他地方声明吗？当我在课堂上引用它时，它就起作用了。

class Tabs extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      activeLocation: 0,

      activeTabIndex: 0,
      initialData: [
        {
          label: "General",
          content: <GeneralContent />
        }
      ]
    };
    this.handleTabClick = this.handleTabClick.bind(this);
  }

  handleTabClick(index) {
    this.setState({
      activeTabIndex: index
    });
  }

  render() {
    const { initialData, activeTabIndex } = this.state;
    const activeItem = this.state.initialData[activeTabIndex];

    const { company } = this.props;

    return (
      <div>
        <article>
          <div>
            <NavBar />
            <div className="container">
              <Tabs
                handleTabClick={this.handleTabClick}
                data={this.state.initialData}
                activeTabIndex={activeTabIndex}
              />
              <Content content={activeItem.content} />
            </div>
          </div>
        </article>
      </div>
    );
  }
}

const GeneralContent = () => (
  <div>
    <h1>{company.name}</h1>
  </div>
);

谢谢！

Answer 1

在构造函数中，您可以将公司作为道具添加到GeneralContent

initialData: [
        {
          label: "General",
          content: <GeneralContent company={props.company}/>
        }
      ]

这不是一个好习惯，因为您的GeneralContent不会知道公司是否变更。您可以使用componentDidUpdate

解决此问题

componentDidUpdate(prevProps, prevState) {
 if(prevProps.company.name !== this.props.company.name) {
    const tabData = [...this.state.initialData];
    tabData.find((tab) => tab.label === 'General');
    tabData.content = <GeneralContent company={this.props.company} />;

    this.setState({initialData: tabData});
 }
}

这会使用新的General更新您的company标签。如您所见，维护有点“复杂”。

我会重构代码来避免这样做，例如：

class Tabs extends React.Component {
  constructor(props) {
    super(props);

    this.state = {      
      activeTabIndex: 0,      
    };
    this.handleTabClick = this.handleTabClick.bind(this);
  }

  handleTabClick(index) {
    this.setState({
      activeTabIndex: index
    });
  }

  render() {
    const { activeTabIndex } = this.state;

    const tabData = [
      {
        label: "General",
        content: <GeneralContent company={this.props.company}/>
      }
    ];

    const tabContent = tabData[activeTabIndex];

    return (
      <div>
        <article>
          <div>
            <NavBar />
            <div className="container">
              <Tabs
                handleTabClick={this.handleTabClick}
                data={tabData}
                activeTabIndex={activeTabIndex}
              />
              <Content content={tabContent} />
            </div>
          </div>
        </article>
      </div>
    );
  }
}

const GeneralContent = () => (
  <div>
    <h1>{company.name}</h1>
  </div>
);

基本上，选项卡的生成已移至您的render方法。

在类外反应引用const

1 个答案: