我试图用CSS添加侧面div,但似乎无法搞清楚.这就是我到目前为止所拥有的.谁能指出我正确的方向?我在下面列出了我想要复制的图片.这是中间的盒子.

body {
background: #1b1b1b;
color: white;
}
.container {
display: table;
margin: auto;
}
.box {
width: 150px;
height: 150px;
background: #cc0000;
margin: 50px;
}
.right-skew {
position: relative;
}
.right-skew:before {
z-index: -1;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -15px;
display: block;
width: 35px;
background: grey;
-webkit-transform: skew(-10deg);
-ms-transform: skew(-10deg);
transform: skew(-10deg);
}
.right-skew:after {
z-index: -1;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -15px;
display: block;
width: 35px;
background: grey;
-webkit-transform: skew(10deg); …Run Code Online (Sandbox Code Playgroud)我已经实现了一个侧边菜单,每个部分都有一个链接标签,但我不确定在点击它们时如何实现该功能,用户被带到特定部分。我知道如果它在同一个组件中并且我以正常方式生成部分但我以不同的方式做它并且我不确定如何实现诸如 react-scroll 或 scrollchor 之类的东西。
在这里,我通过映射另一个文件中的一些数据来使用 buildTree 生成部分。
export default class CheckboxGroup extends PureComponent {
constructor(props) {
super(props);
this.checkboxState = new Map();
this.state = {
checkboxState: new Map(),
};
}
static propTypes = {
data: PropTypes.any.isRequired,
onChange: PropTypes.func.isRequired,
counter: PropTypes.number,
};
treeCheckboxOnChange = (parentLabel, id, checked) => {
this.checkboxState = this.checkboxState.setIn([parentLabel, id], checked);
this.setState({
checkboxState: this.checkboxState,
});
};
mapParents = (counter, child) => {
const parentLabel = child.get('label');
return (
<li key={child.get('name')} className='field'>
<SegmentHeader style={segmentStyle} title={child.get('label')} icon={child.get('icon')}>
<div className='fields' style={zeroMargin}> …Run Code Online (Sandbox Code Playgroud) 我试图将 FlatList 放入 Modal 中,但列表只是从我给它的容器中溢出而不是滚动。我尝试过添加 Flex 等,但没有运气让列表保持在界限内。有什么建议么?
Here is the Modal
const modalContainer = {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
flex: 1,
};
const innerContainer = {
alignItems: 'center',
// flex: 1,
height: 130,
backgroundColor: colors.white.white,
borderRadius: borderRadius.sm,
width: 450,
};
render() {
const styles = styleMaker();
return (
<View>
<Modal visible = {this.props.visible}>
<View style={styles.overlay} />
<View style = {styles.modalContainer}>
<View style = {styles.innerContainer}>
{this.props.children}
</View>
</View>
</Modal>
</View>
);
}Run Code Online (Sandbox Code Playgroud)
凯勒决定删除他的帐户.循环遍历您的对象数组,直到找到kyler的帐户 - 使用kyler@test.com在数组中找到他.找到他所在的特定索引后,将其从数组中删除.
var users = [{
name: 'talon',
email: 'talon@test.com',
password: 'test1234',
username: 'tdog',
},{
name: 'lauren',
email: 'lauren@test.com',
password: 'admin1234',
username: 'ldogg',
},{
name: 'cohen',
email: 'cohen@test.com',
password: 'baby1234',
username: 'cdoggy',
},{
name: 'kyler',
email: 'kyler@test.com',
password: 'delete1234',
username: 'kdawg'
}];
Run Code Online (Sandbox Code Playgroud)
这是我到目前为止所做的,但我正在转动我的车轮:
function deleteUser(arr)
for (var i = 0; i < users.length; i++) {
if (arr.indexOf([i]) === 'kyler@test.com') {
users.slice(arr[i]);
}
}
Run Code Online (Sandbox Code Playgroud)
我不确定我的每个用户是否需要在数组中分配变量或者它是否是我的切片.任何指导都会很棒.谢谢
javascript ×3
arrays ×1
css ×1
css-shapes ×1
css3 ×1
function ×1
html ×1
modal-dialog ×1
react-native ×1
react-router ×1
reactjs ×1
routes ×1