Question

呈现子组件并传递所有选项。父组件使用相同的选项。该场景的代码示例在子组件中的选项下方，而子组件中的选项作为道具从父组件传递

父组件

    class OptionList extends Component {

  renderUsers() {
    if(this.props.users.length){
    return this.props.users.map(option => (
      <Client options={this.props.options}
      />
    ));
    }
  }

  renderOptionsForm() {
      return (
        <div>

          <form>
            <div className="form-row">
            <Select
              options={this.props.options}
              isMulti
            />
        </div>
          <ul>
            {this.renderUsers()}
          </ul>
      );
    }

  render() {
    return (
      <div className="width-narrow">

        {this.renderOptionsForm()}

      </div>
    );
  }
}
// props
OptionList.propTypes = {
  options: PropTypes.array.isRequired,
};
OptionList.childContextTypes = {
  muiTheme: PropTypes.object.isRequired,
};


// container
export default withTracker(() => {
  Meteor.subscribe('options');
  Meteor.subscribe('users');

  return {
    options: Options.find({}).fetch().map(({ name: label, _id: value }) => ({ label, value })),
    users: Users.find().fetch()

  };
})(OptionList);

子组件

    export default class Option extends Component {

  renderEditOptions() {

      return (
        <div>
          <Select
                        options={this.props.deliveryTypes}
                        isMulti
                      />
        </div>
      );
  }

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

此处的值显示正确，但选项下拉菜单从不弹出

Answer 1

您在Option组件内部使用了错误的道具。

您正在使用的道具（deliveryTypes）没有提供给组件。但是Option组件会得到一个options道具，我认为这是您要使用的道具。

export default class Option extends Component {
  renderEditOptions() {
    return (
      <div>
        <Select
          options={this.props.options} // <-- instead of deliveryTypes
          isMulti
        />
      </div>
    );
  }

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

选项下拉列表未显示在子组件中

1 个答案: