react-select 包在构建中不起作用答案

【问题标题】：react-select package not working in buildreact-select 包在构建中不起作用
【发布时间】：2019-03-15 04:26:31
【问题描述】：

我在构建时遇到了这个错误。

当创建 react 项目的构建时，react-select 下拉菜单不起作用，我们还在 react-select 下拉菜单中添加了一些设计（CSS）。

我还想使用 redux-form 验证显示错误消息。我的错误是这样的：https://cloud.githubusercontent.com/assets/11028434/13355530/26648d8c-dca1-11e5-9776-15c795a8fb2b.gif 我的代码：

class AddArtwork extends React.Component {
    constructor(props) {
        super(props);
          this.state = {defaultval: "Select material" }
        }
    GetMedium() {
       var =materialArray[];
        materialArray = [{"value":0,"label":"Select material"}
        {"value":1,"label":"aa"},
        {"value":2,"label":"bb"},
        {"value":3,"label":"cc"},
        {"value":4,"label":"dd"},
        {"value":5,"label":"ee"},
        {"value":6,"label":"ff"},
        {"value":7,"label":"gg"}];
         return materialArray;     
        }
    MaterialDropdown = ({ input, meta ,options}) => {
    return (<div className="react-select">
            <Select
            {...input}
            onBlur={() => input.onBlur(input.value)}
            placeholder={this.state.defaultval}
            name="material"
            options={this.GetMedium()}
            />
            {   
              this.renderError(meta)
            }
            </div>);
}


render(){
 return (<form>
   <Field
     id="material"
     name="material"
     component={this.MaterialDropdown}/>
  </form>)
}
}

【问题讨论】：

你的意思是把这个 div 放两次吗？ return (<div className="react-select"><div className="react-select">
你的代码有很多问题： 1）你用this.state的函数组件，只能在Class组件中使用。 2) 你有两个开始标签和一个结束标签<div> 3) 要么你不合理地使用了this，要么你没有把所有的代码都放在这里。等等
不，是我的错...现在检查一下，请给我建议...
你想渲染错误而不是选中元素吗？
不，我无法在 react build(npm run build) 中选择一个元素。像这样cloud.githubusercontent.com/assets/11028434/13355530/…

标签： reactjs redux react-redux redux-form react-select

【解决方案1】：

如果我没看错，您使用的是redux-form。你的MaterialDropdown 的道具是错误的。 redux-form 不会将它提供给组件的道具包装到另一个对象中。它们可以直接从 props 对象中获得：

MaterialDropdown = ({value, onChange, ...props}) => {

    /* ... */

    <Select
        value={value}
        onChange={onChange}
        { ... }
    />

    /* ... */
}

documentation 提供了一个直接传递给组件的 props 列表。

【讨论】：