如何正确地将自定义数据属性道具传递给子组件?
How to properly pass custom data attribute props to child components?
基本上我有3个自定义属性data-pageName
, data-defaultOption
, data-options
.
我遇到的问题是,当我传递到我的子组件时,我得到了一个意外的令牌错误,因为它是这样的:
const pageContent = ({data-pageName, name, onChange, data-defaultOption, value, data-options}) => {
/*return here*/
};
基本上是 -
符号导致了错误。
如何将其包含为 data-pageName
而不是读作 data
-
pageName
?
我是这样称呼组件的:
<pageContent data-pageName={this.state.pageClicked} onChange={this.closeMenu} data-defaultOption={this.state.tmpDefaultOption} value={this.state.tmpValue} data-error={this.state.tmpError} data-options='a'/>
变量名中不允许使用破折号。所以,你必须使用引号 ''
const Example = (props) =>
<div>{props['data-name']}</div>
ReactDOM.render(
<Example data-name="hello"/>,
document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />
使用破折号时,必须用单引号括起来。
render() {
const myProps = {
'data-pageName': this.state.pageClicked,
'data-defaultOption': this.state.tmpDefaultOption,
};
return <MyComponent {...myProps} />
}
然后您可以在您的子组件中使用 this.props['data-pageName']
。
当您销毁子组件 props 时,您可以将其虚线变量分配给具有 new names 的变量。
const PageContent = ({ 'data-options': dataOptions }) => (
<div>...</div>
);
PageContent.propTypes = {
'data-options': PropTypes.string
};
基本上我有3个自定义属性data-pageName
, data-defaultOption
, data-options
.
我遇到的问题是,当我传递到我的子组件时,我得到了一个意外的令牌错误,因为它是这样的:
const pageContent = ({data-pageName, name, onChange, data-defaultOption, value, data-options}) => {
/*return here*/
};
基本上是 -
符号导致了错误。
如何将其包含为 data-pageName
而不是读作 data
-
pageName
?
我是这样称呼组件的:
<pageContent data-pageName={this.state.pageClicked} onChange={this.closeMenu} data-defaultOption={this.state.tmpDefaultOption} value={this.state.tmpValue} data-error={this.state.tmpError} data-options='a'/>
变量名中不允许使用破折号。所以,你必须使用引号 ''
const Example = (props) =>
<div>{props['data-name']}</div>
ReactDOM.render(
<Example data-name="hello"/>,
document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />
使用破折号时,必须用单引号括起来。
render() {
const myProps = {
'data-pageName': this.state.pageClicked,
'data-defaultOption': this.state.tmpDefaultOption,
};
return <MyComponent {...myProps} />
}
然后您可以在您的子组件中使用 this.props['data-pageName']
。
当您销毁子组件 props 时,您可以将其虚线变量分配给具有 new names 的变量。
const PageContent = ({ 'data-options': dataOptions }) => (
<div>...</div>
);
PageContent.propTypes = {
'data-options': PropTypes.string
};