React JS：如何隐藏/显示标签？

Question

我想隐藏/显示其他文件中的某些标签。 我们有一个带有选项卡的模式，某些选项卡应该在另一个文件（另一个组件）中单击单选按钮时隐藏。 我的意思是这些组件位于不同的文件中。

我的问题是如何将数据或函数从一个文件传递到另一个文件？ 我需要使用单选按钮的onChange来执行此操作。 我正在使用react-bootstrap中的选项卡。

我希望你们中的一些人知道如何做到这一点的例子？

提前致谢！ :)

编辑：

在tabs.js中

export default class ArchiveForm extends React.Component<Props, State> {
  static defaultProps = {
    onChange() {}
  };

  constructor(props) {
    super(props);

    // Bindings
    this.handleTabChange = this.handleTabChange.bind(this);

    // Child refs
    this.childrenForms = {};
    this.state = {
      key: 1
    };
  }

  handleTabChange(key) {
    this.setState({key});
  }

  handleHideTabs(key) {
    const {data} = this.props;
    if (data.Type === 0) {
      this.change = key === 2 && 3;
    }
  }

  render() {
    const {data, archive, groups, users} = this.props;
    const {key} = this.state;
    console.log('markers tab', data);

    if (data.Type === 0) {
      this.change = false;
    } else {
      this.change = true;
    }

    return (
      <Tabs
        activeKey={key}
        onSelect={this.handleTabChange}
        id="workflow-edit-form"
        bsStyle="pills"
        animation={false}
      >
        <Tab eventKey={1} title="General">
          <Row>
            <Col sm={6}>
              <Identification
                {...data}
                ref={instance => { this.childrenForms.Identifications = instance; }}
                change={event => this.handleHideTabs(event)}
              />
              <Condition
                {...data}
                ref={instance => { this.childrenForms.Conditions = instance; }}
              />
            </Col>
            <Col sm={6}>
              <Display
                {...data}
                ref={instance => { this.childrenForms.Displays = instance; }}
              />
            </Col>
          </Row>
        </Tab>
        {this.change && (
          <Tab eventKey={2} title="Action">
            <Row>
              <Col sm={12}>
                <Action
                  {...data.Action}
                  ref={instance => { this.childrenForms.Actions = instance; }}
                />
              </Col>
            </Row>
          </Tab>)}
        {this.change && (
          <Tab eventKey={3} title="Notification">
            <Row>
              <Col sm={6}>
                <Notification
                  {...data.NotificationSettings}
                  ref={instance => { this.childrenForms.Notifications = instance; }}
                />
              </Col>
            </Row>
          </Tab>)}
        <Tab eventKey={4} title="Archive filter">
          <Row>
            <Col sm={12}>
              {/* <ArchiveFilter
                {...data.ArchiveFilter}
                archive={archive}
                ref={instance => { this.childrenForms.ArchiveFilters = instance; }}
              /> */}
            </Col>
          </Row>
        </Tab>
        <Tab eventKey={5} title="Access list">
          <Row>
            <Col sm={12}>
              <AccessList
                properties={data.AccessList.Members}
                groups={groups}
                users={users}
                ref={instance => { this.childrenForms.MemberList = instance; }}
              />
            </Col>
          </Row>
        </Tab>
      </Tabs>
    );
  }
}

在单选按钮所在的文件中。 Identification.js

export default class extends React.Component<Props, State> {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleRadioChange = this.handleRadioChange.bind(this);
    const {Name, Description, Type, Modes, DisplayType, Position} = props;
    this.state = {Name, Description, Type, Modes, DisplayType, Position};

    this.translations = {
      identification: LocalizationService.get('userManagement', 'identification'),
      name: LocalizationService.get('userManagement', 'name'),
      description: LocalizationService.get('userManagement', 'description'),
      type: LocalizationService.get('management', 'type'),
      standard: LocalizationService.get('management', 'standard'),
      extended: LocalizationService.get('management', 'extended')
    };
  }

  handleChange(e) {
    this.setState({
      [e.target.dataset.name]: e.target.value
    });
  }

  handleRadioChange(e) {
    this.setState({
      Type: parseInt(e.target.value, 10)
    });
  }

  render() {
    const {Name, Description, Type} = this.state;
    return (
      <form className="modal-container">
        <h4>{this.translations.identification}</h4>
        <FormGroup>
          <ControlLabel className="input-label">{this.translations.name}</ControlLabel>
          <FormControl
            className="modal-inputs"
            placeholder="Name"
            type="text"
            value={Name}
            data-name="Name"
            onChange={this.handleChange}
          />
        </FormGroup>
        <FormGroup>
          <ControlLabel className="input-label">{this.translations.description}</ControlLabel>
          <FormControl
            className="modal-inputs"
            placeholder="Description"
            type="text"
            value={Description}
            data-name="Description"
            onChange={this.handleChange}
          />
        </FormGroup>
        <ControlLabel className="input-label">
          {this.translations.type}
        </ControlLabel>
        <FormGroup className="condition-radio-buttons">
          <Radio name="radioGroup10" defaultChecked={Type === 0} value={0} onChange={props.change}>
            {this.translations.standard}
          </Radio>
          {' '}
          <Radio name="radioGroup10" defaultChecked={Type === 1} value={1} onChange={this.handleRadioChange}>
            {this.translations.extended}
          </Radio>
        </FormGroup>
      </form>
    );
  }
}

是的，我从API获取数据！ :)

Answer 1

您遇到的问题很正常，在项目开发周期的某个时候，每个人都会遇到它。

一种可能的解决方案是将状态上移到作为需要共享数据的两个组件的父级的组件，然后将状态向下传递给两个组件。

如果这对您来说是一个丑陋的解决方案，则最好的选择是使用状态管理库。 最受欢迎的是Redux和MobX

Answer 2

我已经使用tabClassName ='d-none'解决了这个问题。

  <Tabs defaultActiveKey="text" id="text">
          <Tab eventKey="text" tabClassName={!this.state.visual ? 'd-none' : 
            ''} title="Text">
            <Text user={this.state.id} getPostLength={this.getPostLength} />
          </Tab>
          <Tab eventKey="visual" tabClassName={!this.state.visual ? 'd-none' : 
            ''} title="Visual">
            <Visual user={this.state.id} getPostLength={this.getPostLength} />
          </Tab>
          <Tab eventKey="video" tabClassName={!this.state.video ? 'd-none' : 
             ''} title="Video">
            <Video user={this.state.id} getPostLength={this.getPostLength} />
          </Tab>
          <Tab eventKey="audio" title="Audio">
            <Audio user={this.state.id} tabClassName={!this.state.audio ? 'd- 
             none' : ''} getPostLength={this.getPostLength} />
          </Tab>
        </Tabs>