如何在react js中创建包含另一个下拉列表的DropDrop100%宽度？

在React.js中创建一个包含另一个下拉列表的100%宽度的下拉列表，可以按照以下步骤进行：

首先，安装React.js和相关的依赖库。可以使用npm或yarn来安装React.js和其他必要的库。
创建一个React组件，可以命名为DropdownContainer。这个组件将包含两个下拉列表，一个是主要的下拉列表，另一个是次级的下拉列表。
在DropdownContainer组件的render方法中，使用React的JSX语法来创建下拉列表。可以使用HTML的select和option元素来创建下拉列表。
为了实现100%宽度，可以在下拉列表的样式中设置width属性为100%。可以使用内联样式或者CSS类来设置样式。
在主要的下拉列表的onChange事件中，可以监听选择的值，并根据选择的值来动态更新次级下拉列表的选项。
在次级下拉列表的选项中，可以根据选择的值来渲染不同的选项。可以使用条件语句或者switch语句来实现。

下面是一个示例代码：

import React, { Component } from 'react';

class DropdownContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mainDropdownValue: '',
      subDropdownValue: '',
    };
  }

  handleMainDropdownChange = (event) => {
    const value = event.target.value;
    this.setState({ mainDropdownValue: value });
  }

  handleSubDropdownChange = (event) => {
    const value = event.target.value;
    this.setState({ subDropdownValue: value });
  }

  render() {
    return (
      <div>
        <select
          style={{ width: '100%' }}
          value={this.state.mainDropdownValue}
          onChange={this.handleMainDropdownChange}
        >
          <option value="">Select an option</option>
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
          <option value="option3">Option 3</option>
        </select>

        {this.state.mainDropdownValue && (
          <select
            style={{ width: '100%' }}
            value={this.state.subDropdownValue}
            onChange={this.handleSubDropdownChange}
          >
            {this.state.mainDropdownValue === 'option1' && (
              <>
                <option value="">Select a sub-option for Option 1</option>
                <option value="suboption1">Sub-option 1</option>
                <option value="suboption2">Sub-option 2</option>
              </>
            )}

            {this.state.mainDropdownValue === 'option2' && (
              <>
                <option value="">Select a sub-option for Option 2</option>
                <option value="suboption3">Sub-option 3</option>
                <option value="suboption4">Sub-option 4</option>
              </>
            )}

            {this.state.mainDropdownValue === 'option3' && (
              <>
                <option value="">Select a sub-option for Option 3</option>
                <option value="suboption5">Sub-option 5</option>
                <option value="suboption6">Sub-option 6</option>
              </>
            )}
          </select>
        )}
      </div>
    );
  }
}

export default DropdownContainer;

这个示例代码中，DropdownContainer组件包含两个下拉列表，一个是主要的下拉列表，另一个是次级的下拉列表。主要的下拉列表的选项为"Option 1"、"Option 2"和"Option 3"，次级的下拉列表的选项根据主要下拉列表的选择动态更新。每个选项都有一个空的值作为默认选项。

你可以根据自己的需求来修改和扩展这个示例代码。希望对你有帮助！