React创建一个按钮-非硬编码属性

React creating a button - non hardcoded properties

本文关键字：编码 属性 按钮 一个 创建 React      更新时间：2023-09-26

我正在尝试创建一个react按钮，下面是当前代码:

var React = require('react');
var buttonStyle = {
  margin: '10px 10px 10px 0'
};
var Button = React.createClass({
  render: function () {
    return (
      <button
        className="btn btn-default"
        style={buttonStyle}
        onClick={this.props.handleClick}>{this.props.label}</button>
    );
  }
});
module.exports = Button;

问题是我不希望className硬编码，没有onclick。

我希望能够添加类和onclick事件之外的这段代码…例如:

<Button bStyle="myChosenStyles" onclick="myChosenFunction" />

我该怎么做?

你需要正确地将className或click事件处理程序传递给道具，然后在组件中使用它，例如:

var Button = React.createClass({
  render: function () {
    return (
      <button
        className={this.props.bStyle}
        style={buttonStyle}
        onClick={this.props.onclick}>{this.props.label}</button>
    );
  }
});
// use {} when passing myChosenFunction to the props
<Button bStyle="myChosenStyles" onclick={myChosenFunction} label="myLabel" />

您的代码目前有一个点击处理程序handleClick，这是按钮组件的属性(您可以简单地将名称更改为onclick)。使用单引号或双引号可以传递字符串变量(如label或className)。当你想传递对象、函数、数字等时，你需要用花括号{}把它括起来。

相关文章：