Question

基本上我有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'/>

Answer 1

变量名中不允许使用破折号。所以，你必须使用引号''

＆＃13;

const Example = (props) =>
  <div>{props['data-name']}</div>

ReactDOM.render(
  <Example data-name="hello"/>,
  document.getElementById('app')
)

＆＃13;

<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" />

＆＃13;

Answer 2

使用破折号时，必须将其包装在单引号内。

render() { 
  const myProps = {
    'data-pageName': this.state.pageClicked,
    'data-defaultOption': this.state.tmpDefaultOption,
  };

  return <MyComponent {...myProps} />
}

然后，您可以在子组件中使用this.props['data-pageName']。

Answer 3

销毁子组件道具时，可以将其虚线变量分配给带有new names的变量。

const PageContent = ({ 'data-options': dataOptions }) => (
    <div>...</div>
);

PageContent.propTypes = {
    'data-options': PropTypes.string
};

如何正确地将自定义数据属性道具传递给子组件？

3 个答案: