Question

我正在使用SkyLight react组件进行模式对话框。我要解决的问题是如何仅使用一个按钮在模式对话框中显示不同的内容。

<a className="btn btn-secondary" onClick={() => {
   this.setState({
     features: plan.features
       })
      this.dialog.show()
   }}>Features</a>

我要显示的内容是Array。

例如：features:["Feature 1", "Feature 2"]

我将这些功能保留在state中，并使用地图循环在单击时显示它们。

<SkyLight hideOnOverlayClicked ref={ref => this.dialog = ref} title="Hi, I'm a simple modal">
  {
   this.state.features.map((feature)=>{
     <h4>{feature}</h4>
    })

      }
  </SkyLight>

单击该按钮时出现以下错误：无法读取未定义的属性“ show”

有什么办法解决这个问题吗？\

谢谢

Answer 1

最有可能是您在构造函数上缺少ref Creation。

class ParentComponentForModal extends Component{
    constructor(){
         // rest of your constructor.
         this.dialog = React.createRef();
    }
    //....rest of your code
}

，然后将组件更改为具有ref={this.dialog}而不是ref={ref => this.dialog = ref}

<SkyLight hideOnOverlayClicked ref={this.dialog} .....

添加一个working sample on codesandbox

无法读取未定义的React js的属性'show'

1 个答案: