小编mar*_*llo的帖子
将默认值设置为选项选择菜单
我想将自定义属性绑定到选项选择菜单.该<option>标签只会有一个属性selected="selected"
<template>
<div>
<select>
<option v-for="" v-bind:selected="[condition ? selected : notSelected]" value="">{{ resource.xprm_name }}</option>
</select>
</div>
</template>
data: {
selected: "selected",
notSelected: ""
}
这不起作用,但如果我v-bind:selected改为v-bind:class那么它会收到相应的类,因此逻辑正在工作,但不是selected属性.
有什么方法可以使用这些自定义属性吗？
推荐指数
解决办法
查看次数
Yarn（或 npm）用 fork 交换嵌套依赖
在我的package.json我有一个包：
{
"somepackage": "^6.5.1"
}
这个包有一个依赖项（来自somepackage's package.json）：
{
"someotherpackage": "^9.4.2"
}
我想将另一个包交换到它的一个叉子上。我知道纱线的Selective dependency resolution功能，但我想这仅适用于同一包的不同版本。
我也可以somepackage手动fork并更改其依赖项，交换someotherpackage到someotherpackage-fork，但如果有另一种方式，我会采取这种方式。
谢谢！
推荐指数
解决办法
查看次数
具有箭头功能的事件处理程序如何实现上下文绑定
我了解this绑定的一般理论（重要的函数调用站点，隐式，显式绑定等）以及解决React中此绑定问题的方法，因此它始终指向我想要this成为的对象（绑定构造函数，箭头函数等），但我正在努力获取内部机制。
看一下这两段代码：
class demo extends React.component {
goToStore(event) {
console.log(this)
}
render() {
<button onClick={(e) => this.goToStore(e)}>test</button>
}
}
与
class demo extends React.component {
goToStore(event) {
console.log(this)
}
render() {
<button onClick={this.goToStore}>test</button>
}
}
我所知道的是：
- 在这两个版本中，我们都成功地使用goToStore方法成功，因为
this该render()方法内部自动（通过React）绑定到组件实例 - 因此，第一个成功了，
- 第二个失败，因为es6中的类方法未绑定到组件实例，因此
this将方法解析为undefined
据我了解，从理论上讲，在第一版中会发生以下情况：
- 按钮点击处理程序是一个匿名箭头函数，因此，只要我在其中引用
this，它就会this从环境中拾取（在本例中是从render()） - 然后调用
goToStore方法，即常规函数。 - 因为该调用似乎符合隐式绑定（
object.function()）的规则，所以object它将成为上下文对象，并且在此类函数调用中，它将用作this - 因此，在
goToStore方法内部，按词法拾取该对象（用作上下文对象）将正确解析为组件实例
我觉得这里不是3.和4.，因为那样就适用于2.情况：
<button onClick={this.goToStore}>test</button>
还带有this上下文对象。
在这种特定情况下，逐步发生了什么？
推荐指数
解决办法
查看次数
TypeScript(ReactJS)编译器错误,这隐式具有类型any
我有一个用TypeScript编写的React组件:
class App extends React.Component<props> {
constructor(props) {
super(props);
this.treeNavElement = this.treeNavElement.bind(this);
}
treeNavElement() {
return (
<div></div>
)
}
render() {
return (
<div>
{
this.props.NavDataTree.map(function(elem) {
return <div key={elem.id} onClick={this.treeNavElement}>{elem.name}</div>
}, this)
}
</div>
)
}
}
export default App;
我的问题是打字稿编译器对我大吼大叫,因为这行:
return <div key={elem.id} onClick={this.treeNavElement}>{elem.name}</div>
他说:
[ts]'this'隐式具有类型'any',因为它没有类型注释.
在map函数之外,在map第二个参数中,this.props它工作正常,但内部onClick this丢失.
如果我设置"noImplicitThis": false的tsconfig.json是好的,但我想知道是否有办法解决头也不回implicitthis了吗？
推荐指数
解决办法
查看次数
在 React Native 中渲染等宽按钮
我想在一行中渲染 7 个宽度相等的按钮，以水平填充所有可用空间。
render() {
return (
<FlatList
data={this.state.days}
renderItem={({ item }) => <View style={styles.button}><Button title={item.getDate().toString()} /></View>}
keyExtractor={item => item.getDate().toString()}
horizontal={true}
style={styles.list}
/>
);
}
const styles = StyleSheet.create({
list: {
display: 'flex'
},
button: {
flex: 1
}
});
它们位于平面列表内，包装在视图中，因为我无法直接设置按钮的样式。在 HTML 页面中的常规 Flexbox 中，此方法有效。
这是我在 React Native 中得到的：
也许有一些我不熟悉的扁平列表行为？
推荐指数
解决办法
查看次数
Markdown：防止段落标签包裹在标准 HTML span 标签周围
我想混合标准 HTML 和 Markdown。我有一个用 Markdown 编写的段落，后跟一个 HTML<span>元素。
问题是：如果我不在段落后面放置 return: ，则它将<span>紧接在段落<p>标记内的文本之后：
<p>Some text
<span>My span</span>
</p>
但是，如果我确实将 return 放在段落后面（用 Markdown 编写），则<span>单独的内容将被包裹在<p>标签中，如下所示：
<p>Some text</p>
<p><span>My span</span></p>
我想要的只是这样：
<p>Some text</p><span>My span</span>
抱歉，如果我忽略了一些非常明显的事情，我很累。谢谢！
（如果有帮助的话，我正在使用 Kramdown 进行转换）
推荐指数
解决办法
查看次数
目标元素只有在没有任何后续兄弟姐妹的情况下
我有以下标记和样式:
[class^="container"] .target:last-of-type {
color:red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="target">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<br>
<div class="container-2">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="target">5</div>
</div>
</body>
</html>我想选择.target元素,但前提是它是容器中的最后一个元素.
这个:last-of-type类在这种情况下工作,我只是不明白为什么.它不应该突出这两个.target元素吗？它们是父容器中的最后一个(也是唯一的)元素.或者我误解了:last-of-type选择器？
推荐指数
解决办法
查看次数
Vue.js事件使用全局eventbus从子组件发送到(大)父组件
我想使用全局事件总线从子节点发送事件到(大)父节点.
在我的main.js中:我为所有组件提供了一个全局事件总线.
import Vue from 'vue'
import App from './App'
const eventHub = new Vue()
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
Vue.mixin({
data: function () {
return {
eventHub: eventHub
}
}
})
然后,在我的Childcomponent.vue中:我在click事件上向eventbus发出一个事件
<template>
<button @click="save">Save</button>
</template>
<script>
let data = {
columnName: '',
order: 0
}
export default {
...
name: 'init-column',
methods: {
save: function () {
this.eventHub.$emit('newColumn', data)
}
}
...
}
</script>
然后,在Parentcomponent.vue中,我想捕获此事件,并对子项传输的数据执行某些操作:
<template> …推荐指数
解决办法
查看次数
使用markdown创建<span>元素(kramdown)
是否可以使用markdown创建span元素？我正在使用Kramdown转换器.
谢谢!
推荐指数
解决办法
查看次数
VueJS 嵌套列表渲染与道具
我想用 Vue.js 渲染一个嵌套列表，但我的代码在嵌套组件部分失败。我的主要模板：
<body>
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
<ul>
<todo-item v-for="subtodo in todo.subTodos" v-bind:subtodo="subtodo"></todo-item>
</ul>
</li>
</ul>
</div>
</body>
还有我的 js 文件：
Vue.component('todo-item', {
template: '<li>{{subtodo.text}}</li>',
prop: ['subtodo']
})
var app = new Vue({
el: '#app',
data: function () {
return {
todos : [
{
text : 'Learn JavaScript',
subTodos : [
{ text : 'Linting'},
{ text : 'Bundling'},
{ text : 'Testing'}
]
},
{
text : 'Learn Vue',
subTodos : …推荐指数
解决办法
查看次数
标签 统计
vue.js ×3
html ×2
javascript ×2
markdown ×2
reactjs ×2
vuejs2 ×2
css ×1
css3 ×1
events ×1
npm ×1
react-native ×1
this ×1
typescript ×1
word-wrap ×1
yarnpkg ×1