有人可以告诉我如何在React中移动道具吗?

时间:2018-07-23 10:58:37

标签: reactjs tabs react-props

嘿,有人能告诉我在AppHeader关闭之后如何移动renderTabContent内容吗?目前,它不能覆盖整个屏幕,其原因是我也有一个徽标,因此内容会在其后呈现。我尝试了很多可能性,但仍然感到很困惑。每一个帮助将不胜感激。

class TabsExampleSampleContent extends Component {
  static propTypes = {
    name: PropTypes.string,
    onChange: PropTypes.func,
    value: PropTypes.element
  };

  state = {
    value: this.props.value
  };

  onChange = event => {
    this.props.onChange(event);
    this.setState({
      value: event.target.value
    });
  };

  render() {
    return (
      <div>
        {this.state.value}
      </div>
    );
  }
}

function createTabContent(name) {
  const ContentComponent = props => (
    <TabsExampleSampleContent
      key={name}
      name={name}
      onChange={event => {
        cachedState[name] = event.target.value;
      }}
      value={cachedState[name]}
      {...props}
    />
  );
  ContentComponent.displayName = `sampleTab-${name}`;
  return ContentComponent;
}

const Search = 'Search';
const Add = 'Add';
const Update = 'Update';

const cachedState = {
  [Search]: <SearchContent />,
  [Add]: <AddContent />,
  [Update]: <UpdateContent />
};

const SampleTabs = {
  [Search]: createTabContent(Search),
  [Add]: createTabContent(Add),
  [Update]: createTabContent(Update)
};

function renderTabContent({ getTabContentProps, value }) {
  const SampleTab = SampleTabs[value];
  return <SampleTab {...getTabContentProps()} />;
}
renderTabContent.propTypes = {
  getTabContentProps: PropTypes.func,
  value: PropTypes.string
};

const TabsApp = ({ onChange, onDeselect }) => (
  <div>
    <AppHeader
      data-testod="hearder"
      position="static"
      renderNav={({ getNavProps }) => (
        <div {...getNavProps({})} >
          <Tabs
            centered
            noBorder
            defaultValue={Search}
            displayName={'centeredExample'}
            onChange={onChange}
            onDeselect={onDeselect}
            render={({ getTabProps }) => <Tab {...getTabProps()} />}
            renderTabContent={renderTabContent}
            tabs={[Search, Add, Update]}
          />
        </div>
      )}
    />
    // I want to be moved here
  </div>
);

TabsApp.propTypes = {
  onChange: PropTypes.func,
  onDeselect: PropTypes.func
};

export { TabsApp };

0 个答案:

没有答案