0
我已經實現了一個側面菜單，每個部分都有一個鏈接標籤，但我不確定如何在點擊它們時實現功能，將用戶帶到特定部分。我明白如何做到這一點，如果它是在同一個組件，如果我正常生成的部分，但我以不同的方式做，我不確定如何實現像react-scroll或scrollchor的東西。點擊鏈接滾動到特定部分react.js
在這裏，我通過映射我在另一個文件中的一些數據來生成具有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}>
<div className='four wide field'>
<TreeCheckbox
label={`Grant ${child.get('label')} Permissions`}
parentLabel={parentLabel}
counter={counter}
onChange={this.treeCheckboxOnChange}
/>
{child.get('items') && this.buildTree(child.get('items'), counter + child.get('name'), parentLabel)}
</div>
<div className='twelve wide field'>
<GrantDropdown checkboxState={this.state.checkboxState.get(parentLabel, new Map())} label={child.get('label')} childItems={child.get('items')}/>
</div>
</div>
</SegmentHeader>
</li>
);
};
mapDataArr = (counter, parentLabel) => (child) => (
(counter === 0) ?
this.mapParents(counter, child)
:
<li key={child.get('name')}>
<TreeCheckbox label={child.get('label')} parentLabel={parentLabel} onChange={this.treeCheckboxOnChange}/>
{child.get('items') && this.buildTree(child.get('items'), counter + child.get('name'), parentLabel)}
</li>
)
buildTree = (dataArr, counter, parentLabel) => (
<ul key={counter} style={listStyle}>
{dataArr.map(this.mapDataArr(counter, parentLabel))}
</ul>
)
render() {
return (
<div className='tree-view'>
{this.buildTree(this.props.data, this.props.counter)}
</div>
);
}
}我用同樣的方法來映射過來的數據來創建我粘sideNav。
export default class SideNav extends Component {
static propTypes = {
data: PropTypes.any.isRequired,
counter: PropTypes.number,
};
mapPermissionNames = (counter, child) => (
<li key={child.get('name')}>
<Link>{child.get('label')}</Link>
</li>
)
mapDataArr = (counter) => (child) => (
(counter === 0) ?
this.mapPermissionNames(counter, child)
:
<li key={child.get('name')}>
<Link>{child.get('label')}</Link>
</li>
)
buildTree = (dataArr, counter) => (
<ul key={counter} style={listStyle}>
{dataArr.map(this.mapDataArr(counter))}
</ul>
)
render() {
return (
<div className='tree-view'>
{this.buildTree(this.props.data, this.props.counter)}
</div>
);
}
}而這正是他們都被渲染父。
export default class LocationPermissions extends AbstractSettingsComponent {
handlePermissionChange = (e, { value }) => {
this.updatePerson('locationPermissions', value);
}
updateCheckmarks = (id, checked) => {
const { currentPerson } = this.props;
if (checked && !currentPerson.get('permissions').includes(id)) {
this.updatePerson('permissions', id, true);
} else if (!checked && currentPerson.get('permissions').includes(id)) {
this.filterItem(['currentPerson', 'permissions'], id, 1);
}
}
render() {
const { currentPerson } = this.props;
return (
<div>
<SegmentHeader icon='building' title='Location Permissions'>
<div className='two fields' style={zeroMarginBottom}>
<div className='field'>
<OptionSelector
label={`Grant ${this.getPerson()} permissions for...`}
options={this.getPermissionOptions()}
value={currentPerson.get('locationPermissions') || 0}
onChange={this.handlePermissionChange}
/>
</div>
{currentPerson.get('locationPermissions') === 2 &&
<div className='field'>
<label>Grant Location Admin Permissions For</label>
<LocationMultiSelect name='Every' {...this.props}/>
</div>
}
</div>
</SegmentHeader>
<StickyContainer>
{currentPerson.get('locationPermissions') === 3 &&
<div className='fields'>
<div className='three wide field'>
<Sticky style={{ paddingTop: '15px' }}>
<SideNav
data={permissionSections}
counter={0}
/>
</Sticky>
</div>
<div className='twelve wide field'>
<CheckboxGroup
data={permissionSections}
counter={0}
onChange={this.updateCheckmarks}
/>
</div>
</div>
}
</StickyContainer>
</div>
);
}
}我無法理解如何實現類似反應，滾動或scrollchor或反應路由器鏈接標籤可以點擊部分，滾動到頁面上的節。任何建議將非常受歡迎。