Reactjs 反应&x2014；动态列表<；李>'；在doc.ready中无法访问，但<；ul>；是

我使用加载到状态的json对象构建了一个列表

li项似乎无法从document.ready函数访问。i、 e.将单击功能绑定到li的不起作用

然而，我可以绑定到我觉得奇怪的父UL

这是我的列表组件：

从“React”导入React；
var Albums=React.createClass({
render（）{
返回(

{this.props.frames.map（函数（frames））{
返回(

{frames.frameName}

)
}.bind（this））}

)
}
});
module.exports=相册；

这是我的文档准备代码：

$（'#框架列表li'）。单击（函数（）{
警惕（“你好”）；
});

这是父组件设置状态：

从“React”导入React；
从“./SideNavHeader”导入SideNavHeader；
从“./SideNavAccordionMenu”导入SideNavAccordionMenu；
从“./SideNavFooter”导入SideNavFooter；
变量framesData、albumsData、channelsData；
$.getJSON（“/json/frames.json”），函数（frames）{
framesData=帧；
});
$.getJSON（“/json/albums.json”），函数（albums）{
albumsData=相册；
});
$.getJSON（“/json/channels.json”），函数（通道）{
信道数据=信道；
});
var SideNav=React.createClass({
getInitialState（）{
返回{
帧：[]，
相册：[]，
频道：[]
};
},
componentDidMount（）{
var framesList=[]、albumsList=[]、channelsList=[]；
//使用setTimeout函数伪造AJAX请求
setTimeout（函数（）{
framesList=framesData.frames；
albumsList=albumsData.albums；
channelsList=channelsData.channels；
//设置请求完成时的状态
这是我的国家({
框架：框架列表，
专辑：专辑列表，
频道：频道列表
});
}.绑定（本），10）；
},
render（）{
返回(
);
}
});
module.exports=SideNav；

您不想在DOM中附加单击侦听器。React将对您的DOM执行一些操作，包括销毁节点和创建新节点。这可能会破坏绑定到特定节点的侦听器，这些侦听器可能会消失

在本例中，您可能希望在JSX中使用React的内置

onClick

属性，如图所示

尝试以下方法：

从“React”导入React；
var Albums=React.createClass({
handleClick（事件）{
log（'单击了li'）；
},
render（）{
返回(

{this.props.frames.map（函数（frames））{
返回(

{frames.frameName}

)
}.bind（this））}

)
}
});
module.exports=相册；

另外，为了清楚起见，我个人喜欢通过项目将映射分解为它自己的功能：

从“React”导入React；
var Albums=React.createClass({
handleClick（事件）{
log（'单击了li'）；
},
渲染帧（）{
返回这个.props.frames.map（frame=>{
返回(

{frame.frameName}

);
});
},
render（）{
返回(

{this.renderFrames（）}

)
}
});
module.exports=相册；

您不想在DOM中附加单击侦听器。React将对您的DOM执行一些操作，包括销毁节点和创建新节点。这可能会破坏绑定到特定节点的侦听器，这些侦听器可能会消失

在本例中，您可能希望在JSX中使用React的内置

onClick

属性，如图所示

尝试以下方法：

从“React”导入React；
var Albums=React.createClass({
handleClick（事件）{
log（'单击了li'）；
},
render（）{
返回(

{this.props.frames.map（函数（frames））{
返回(

{frames.frameName}

)
}.bind（this））}

)
}
});
module.exports=相册；

另外，为了清楚起见，我个人喜欢通过项目将映射分解为它自己的功能：

从“React”导入React；
var Albums=React.createClass({
handleClick（事件）{
log（'单击了li'）；
},
渲染帧（）{
返回这个.props.frames.map（frame=>{
返回(

{frame.frameName}

);
});
},
render（）{
返回(

{this.renderFrames（）}

)
}
});
module.exports=相册；

如果你真的想使用jquery事件监听器，你必须在ComponentDidMount函数中绑定你的点击事件（在你的相册组件中）

如果你真的想使用jquery事件监听器，你必须在ComponentDidMount函数中绑定你的点击事件（在你的相册组件中）

你如何加载

帧

列表？我的猜测是，它没有在文档准备就绪时加载。该列表是在主应用程序组件中的一个组件中。正在作为状态传递的列表数据。React等同于doc.ready吗？我在componentDidMount中尝试了它，但没有成功。显示将

帧设置为状态的代码。在React
componentDidMount
中，顶级组件的closes相当于document ready。如何加载
frames
列表？我的猜测是，它没有在文档准备就绪时加载。该列表是在主应用程序组件中的一个组件中。作为stat传递的列表数据