草庐IT

TONE_PROP_ACK

全部标签

javascript - 如何将 Prop 传递给组件的故事?

我想为vue-select添加一些故事组件使用Storybook,但我正在努力处理更复杂的案例,其中涉及传递Prop或方法。当我在模板内传递Prop时它起作用:storiesOf('VSelect',module).add('withlabeledcustomoptions',()=>({components:{VSelect},template:``}))我发现它的可读性不是很好,所以我想将它们分别作为props或data传递:.add('withlabeledcustomoptionsasprops',()=>({components:{VSelect},props:{option

javascript - "$attrs is readonly", "$listeners is readonly", "Avoid mutating a prop directly"

我是Vue新手。我正在尝试开发一个聊天应用程序,其中好友列表将显示在左侧菜单上,聊天框将显示在正文中。我正在使用ajax调用加载好友列表,并根据好友ID路由到聊天框。这是代码示例。聊天列表组件将从服务器加载好友列表。这是我的app.js文件;Vue.use(VueRouter)constrouter=newVueRouter({routes,linkActiveClass:"active"});importChatComponentfrom'./components/ChatComponent';constroutes=[{path:'/chat/:id/:name',componen

javascript - Provider 中的无效 Prop child

过去几周我一直在学习React。首先使用普通React开发了一个简单的Chat,现在我开始将Redux集成到我的应用程序中。我添加了一个简单的Action、一个匹配的Reducer(以及一个根Reducer)和一个Store。然后我到达了需要使用react-redux库中的Provider的部分:importReactfrom'react';importReactDOMfrom'react-dom';import{Provider}from'react-redux';import{Router,browserHistory}from'react-router';importConfig

javascript - Vue 2 - 如何在 Prop 中设置默认数组类型

我有我的Vue组件,它以一组对象作为Prop。我经常使用prop验证,尤其是对于“默认”值功能。在这种情况下,我有:props:{items:Array}但我希望它像Typescript或React一样:props:{items:Array.of({key:{type:String,default:'myText'}})}等等有可能实现吗?否则我需要使用计算数据作为map来设置默认值 最佳答案 我创建了示例:jsFiddle,这可能会对您有所帮助,是的...您可以将默认值作为数组返回:ES6props:{items:{type:Ar

javascript - 映射到命名空间模块时将 prop 作为模块名称传递

我正在尝试通过props将商店模块命名空间传递给组件。当我尝试使用prop映射到getter时,它会抛出此错误,未捕获的TypeError:无法将undefined或null转换为对象如果我将名称作为字符串传递,它会起作用。这行得通exportdefault{props:['store'],computed:{...mapGetters('someString',['filters'])}}这不起作用this.store已定义this.storetypeof是一个字符串exportdefault{props:['store'],computed:{...mapGetters(this.

javascript - [Vue 警告] : Invalid prop: type check failed for prop "X". 预期,得到字符串

给定这个Vue2组件:Vue.component('read-more',{props:{'text':String,'clamp':{type:String,default:'ReadMore'},'less':{type:String,default:'ReadLess'},'length':{type:Number,default:100}},template:`{{truncate(text)}}=length"@click="toggle()">{{clamp}}{{text}}=length">{{less}}`,methods:{truncate(string){if(s

javascript - Enzyme 在浅层渲染的 React 组件上为 prop 返回 null

问题我刚刚开始进行enzyme和react测试。我正在尝试让enzyme与karma和webpack在一个简单的react组件上一起工作。我的问题是包装器上的prop()返回null,我不确定为什么。Greeter.jsimportReactfrom'react';/**Atrivialcomponentweaddedwhiletryingtogetthereacttestingworking**/exportdefaultclassGreeterextendsReact.Component{constructor(props){super(props);this.state={nam

javascript - 如何使用 flowtype 在组件的 react 上下文中定义 Prop ?

使用flowtype时在context中定义一个Prop这样//@flowtypeMyType=Object;classCustomViewextendsReact.Component{staticchildContextTypes={someProp:MyType}getChildContext(){return{someProp:this.props.someProp};}}我收到以下错误:CustomView:typespecificationofchildcontextsomePropsisinvalid;thetypecheckerfunctionmustreturnnull

javascript - <BrowserRouter> 忽略 history Prop

我使用的是React路由在线类(class)中的以下代码:import{Router,Route,browserHistory}from'react-router';ReactDOM.render(,document.getElementById('root'));它给了我以下错误'react-router'doesnotcontainanexportnamed'browserHistory'.我做了一些研究,发现我使用的是ReactRouterv4,而上面的代码是针对v3的,所以我发现我应该使用而不是所以我将代码更改为:import{BrowserRouter,Route,Switc

javascript - 用 enzyme react 测试组件 Prop 变化

我正在修改此处找到的示例:https://github.com/airbnb/enzyme/blob/master/docs/api/ReactWrapper/setProps.mdclassFooextendsReact.Component{render(){return({}}/>);}}it('shouldpassanddoesnot',()=>{constwrapper=mount();expect(wrapper.find('.foo').html()).toBe(``);wrapper.setProps({name:'bar'});expect(wrapper.find('