Question

我想将数组prop转换为字符串：

   export default class MyComp extends React.Component {
    render() {
        let type = this.props.type; // [".abc",".ded",".ted"];
        newType = type.join();
//o/p: newType= ".abc,.ded,.ted"

console.log(newType) // ".abc,.ded,.ted"
    return (
      <div>
      <input type="file" accept={newType}/> //here throws error 
    </div>
    )

    }

}

export default class SubComp extends React.Component{
   render() {
     <Mycomp type={[".abc",".ded",".ted"]}/>

 }
}

当我尝试以newType html的值访问accept时，它会抛出： TypeError: Cannot read property 'join' of undefined。我在这里检查的一件事，如果我尝试将硬代码值传递给newType，它将正常工作。仅当Im尝试使用.join()或.toString()将数组转换为字符串时，它才会失败。

render() {
            let type = this.props.type; // [".abc",".ded",".ted"];
            newType = ".abc,.ded,.ted";
        return (
          <div>
          <input type="file" accept={newType}/> //Works Fine!!!! 
        </div>
        )

        }

任何想法可能是导致问题的原因吗？

Answer 1

您需要使用大括号{}来设置道具，就像这样：

 <Mycomp type={[".abc",".ded",".ted"]}/>

Answer 2

您应该将数据传递给像这样的道具

export default class MyComp extends React.Component {
    render() {
        let type = this.props.type; // [".abc",".ded",".ted"];
        let newType = type.join()//converts to string: ".abc,.ded,.ted"
    return (
      <div>
      <input type="file" accept={newType}/> //here throws error 
    </div>
    )

    }

}

export default class SubComp extends React.Component{
   render() {
     <Mycomp type={[".abc",".ded",".ted"]}/>

 }
}

Answer 3

尝试像这样将数组传递给道具

<Mycomp type={[".abc",".ded",".ted"]} />

Answer 4

示例中的代码实际上存在两个问题：

您必须在非字符串的prop值周围使用大括号，因此它应如下所示：<Mycomp type={[".abc",".ded",".ted"]} />
您将联接的数组分配给newType，然后在newtype标签中使用input（注意大小写差异）

更正后的代码如下：

export default class MyComp extends React.Component {
  render() {
    let type = this.props.type;
    let newType = type.join();
    return (
      <div>
        <input type="file" accept={newType}/>
      </div>
    )
  }
}

export default class SubComp extends React.Component {
  render() {
    <Mycomp type={[".abc",".ded",".ted"]} />
 }
}

将数组转换为字符串在react render -Javascript / React中失败

4 个答案: