Question

向JSX添加自定义属性的最佳方法是什么？ Facebook表示已经使用React v16实现了它。

是的。但如果我理解正确，我必须像my-custom-attribute="foo"那样做。那不适合我。因为我需要像MyCustomAttribute="foo"

这样的属性

任何想法？

Answer 1

如下所示将自定义属性添加到组件

预期的父组件：

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
     let selDynamicAttributes = {"data-attr":"someString", "MyCustomAttribute":"foo"}; // see here added custom attrib
    return (
      <div>
        <Button {...selDynamicAttributes}  /> //passed custom attributes
      </div>
    );
  }
}

预期子组件：

 export default class Button extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        const { ...otherAttributes } = this.props;
        return(
            <div>
                    <button 
                        {...otherAttributes}>
                            {this.props.displayText}
                    </button>
            </div>
        );      
    }
}

Working Demo

阅读详情：How to add custom html attributes in JSX

Answer 2

您指的是某个组件吗？在javascript中你不能使用那个对流它会引发你错误的＃34; Uncaught SyntaxError：意外的令牌 - ＆＃34;，我建议你使用snake_case，这是你最接近你的情况。但我真正推荐的是始终使用camelCase。

将自定义属性添加到JSX

2 个答案: