如何通过脚本而非import方式访问Kendo-React下拉组件等部件？

看起来你已经通过<script>标签引入了Kendo React的wrapper脚本，接下来其实很简单——当你用这种方式加载脚本时，所有的Kendo React组件都会挂载到全局的window对象上，具体是在kendo.react.ui这个命名空间下面，你直接调用就可以了。

结合你给出的MultiSelectContainer代码，我帮你调整成脚本方式的实现：

class MultiSelectContainer extends React.Component {
  constructor(props) {
    super(props);
    console.log('Setting up multiselect', props.data);
    this.dataSource = new kendo.data.DataSource({
      data: props.data,
      sort: { field: 'name', dir: 'asc' }
    });
    this.state = {
      selectedValues: []
    };
  }

  handleSelectionChange = (event) => {
    this.setState({ selectedValues: event.target.value });
  }

  render() {
    // 直接从全局命名空间获取MultiSelect组件
    const MultiSelect = kendo.react.ui.MultiSelect;
    
    return (
      <MultiSelect
        dataSource={this.dataSource}
        dataTextField="name"
        dataValueField="id" // 假设你的数据里有id字段作为值
        value={this.state.selectedValues}
        onChange={this.handleSelectionChange}
        placeholder="选择选项..."
        autoWidth={true}
      />
    );
  }
}

这里还有几个关键细节要注意：

• 脚本加载顺序不能乱：必须先加载React、ReactDOM，然后加载Kendo UI的核心脚本（比如kendo.all.min.js或者你需要的特定模块脚本），最后再加载Kendo React的wrapper脚本，这样全局的kendo对象才能正确初始化，组件也能挂载成功。
• 按需引入对应组件的wrapper：如果你要使用其他组件（比如Grid、DropDownList），需要单独引入对应的wrapper脚本，比如kendo-grid-react-wrapper.min.js，每个组件的wrapper都对应kendo.react.ui.[组件名]的全局变量。
• Kendo UI核心依赖不能少：React wrapper只是桥接层，底层还是依赖Kendo UI的核心功能，所以必须确保核心脚本已经加载完成。

内容的提问来源于stack exchange，提问作者Tyler Dahle