Reactjs 如何将本地创建的函数和变量作为道具传递到组件中？

我有一个按钮组件（一个哑组件），我想有一个可选的动画附加到它，并通过道具，动画下来，由另一个道具的布尔值触发。我总是在试图通过这两个考试时出错<代码>标签上的未知道具“涟漪”。从元素中移除此道具。

const Button = (props) => {
{propOne, propTwo, ripple, ...remainingProps} = props

 function coolAnimation () {
  // cool ripple effect code
 }

  return (
    <button
      className={css( styles.button, secondary && styles.secondary)}
      {...remainingProps}
      ripple={false}
      animation={coolAnimation}
    >
      {label}
      {props.children}
    </button>
  )
}

export default Button

我有一个子按钮组件，它只呈现html按钮：

const Button = props => {
  const { label, secondary, ...remainingProps } = props

  return (
    <button
      className={ css(
        styles.button,
        secondary && styles.secondary) }
      {...remainingProps}
    >
      {label}
      {props.children}
    </button>
  )
}

Button.PropTypes = {
  label: React.PropTypes.string.isRequired,
  secondary: React.PropTypes.bool,
}

export default Button

const按钮=道具=>{
常量{label，secondary，…remainingProps}=props
返回(
{label}
{props.children}
)
}
Button.PropTypes={
标签：React.PropTypes.string.isRequired，
次要：React.PropTypes.bool，
}
导出默认按钮

但是我仍然得到了相同的错误

未知道具

动画

，

ripple

在标签上

，即使我将它们从父组件传递到按钮组件（而不是像以前那样直接传递到按钮标签）…有什么想法

问题 这里的问题是，您试图使用无效属性（例如

ripple

属性）呈现HTML元素。React不喜欢这种情况，从15.0.2版开始，React将在控制台中发出警告（正如您所注意到的）

理解

和

之间的区别也很重要。前者使用

foo

的属性创建HTML元素，而后者调用React组件进行渲染，并传递

foo

的属性

也就是说，您可以创建所需的任何React组件，并使用道具传递所需的任何数据。但是，HTML元素不能具有您想要的任何属性

---

解决方案 要修正你的警告，你应该看看我前几天回答的。它还解释了“定制道具”的问题，比我上面所做的更详细

如果确实需要自定义html属性，可以使用

data-

后跟所需属性的名称。例如：

<button data-ripple="false">My button</button>

我的按钮

---

这是一个有效的HTML元素，属性也是如此。

看起来你在这里得到了一些错误的模式——你可能想考虑碰上一个好的<代码>反应< /代码>教程。这需要一些时间，但从长远来看，这将为你节省大量的挫折

关于你的问题，有几点：

首先，您得到的错误是因为您在常规

html

元素上分配属性，而不是

React组件

。

标记名

区分大小写，因此

！==

其次，你在实现目标的过程中跳过了几个步骤。不幸的是，这并不像仅仅声明一个动画那么简单——组件必须被告知何时制作动画、制作什么动画等等

下面是一个简单的按钮示例，当鼠标上方出现
onMouseOver
时，按钮会增长。我没有测试过这个，所以不要把它当作福音：

// parent component
class ButtonParent extends React.Component {
  constructor(props) {
  this.state = {
    isMouseOver: false
  }
  this.handleButtonHover = this.handleButtonHover.bind(this)
  }

  handleButtonHover() {
    this.setState({ isMouseOver: !this.state.isMouseOver })
  }

  render() {
    return (
      <div>
        <Button 
          handleButtonHover={this.handleButtonHover} 
          isButtonHovered={this.state.isButtonHovered}
        />
      <div>
    )
  }

// Button.jsx
const Button = (props) => {
  const {handleButtonHover, isButtonHovered, ...remainingProps} = props

  const style = {
    transform: props.ripple === true ? 'scale(1.5,1.5) : 'scale(1,1)',
    transition: 'all 0.5s ease-in',
  }

  return (
    <button
       onMouseEnter={props.handleButtonHover}
       onMouseLeave={props.handleButtonHover}
      {...remainingProps}
    >
      {label}
      {props.children}
    </button>
  )
}

export default Button

//父组件
类ButtonParent扩展了React.Component{
建造师（道具）{
此.state={
isMouseOver:错
}
this.handleButtonHover=this.handleButtonHover.bind（this）
}
把手按钮悬停（）{
this.setState（{isMouseOver:！this.state.isMouseOver}）
}
render（）{
返回(
)
}
//Button.jsx
常量按钮=（道具）=>{
const{handleButtonHover，isbuttonhover，…remainingProps}=props
常量样式={
变换：props.ripple==真？'scale（1.5,1.5）：'scale（1,1）'，
过渡：“所有0.5秒轻松进入”，
}
返回(
{label}
{props.children}
)
}
导出默认按钮

您看到模式了吗？当前状态保存在父级中，父级将其传递给子级，子级将使用
回调
。当子级看到事件时，它将使用
回调
，该回调会更改父级的状态，并影响（通过
样式
对象）按钮

这种类型的句柄事件->调整状态->重新渲染模式对于
React
应用程序至关重要，使用
三元运算符来处理事件也是如此。
谢谢你的回答克里斯！我正在查看你的另一个示例：）是的，我的模式有点混淆了！很明显，我是个新手，而且感受学习的束缚（我确实有一些很棒的教程，但我仍然在路上碰头，哈哈）我将在这里坐几分钟，学习你的例子，然后尝试实现它-在我回来之前（我可能还有更多问题，哈哈）…非常感谢您提供了一个正确模式的示例！我在看到我在我认为正确的方法上有相同的错误之前就标记了您的答案（我看到了错误的控制台，打开了太多的控制台和选项卡！）-然而，我确实认为我在正确的轨道上跟随你的例子…你能检查我的更新吗？没关系，我忘了在const中传递道具了！：）因此，就模式而言，你在正确的轨道上——就是从父代传下来。但是你之所以会出现错误，是因为
根本没有
动画te
属性，因此它不知道如何处理您传递的任何函数。“动画”是一个模糊的术语，因此很难说您应该在这里做什么。在React中设置动画的最简单方法是我的示例——根据
事件
和
回调
更改
样式
属性。这样，您传递给
按钮
的唯一属性就是
样式
。我正在做的动画这是一个onclick涟漪效应，我使用一个JS函数来获取点击坐标，所以这不是我单独用CSS就能做到的。棘手的是，我想调用它的按钮有自己的点击事件来切换东西…所以我不能将动画函数称为点击事件
<button data-ripple="false">My button</button>

// parent component
class ButtonParent extends React.Component {
  constructor(props) {
  this.state = {
    isMouseOver: false
  }
  this.handleButtonHover = this.handleButtonHover.bind(this)
  }

  handleButtonHover() {
    this.setState({ isMouseOver: !this.state.isMouseOver })
  }

  render() {
    return (
      <div>
        <Button 
          handleButtonHover={this.handleButtonHover} 
          isButtonHovered={this.state.isButtonHovered}
        />
      <div>
    )
  }

// Button.jsx
const Button = (props) => {
  const {handleButtonHover, isButtonHovered, ...remainingProps} = props

  const style = {
    transform: props.ripple === true ? 'scale(1.5,1.5) : 'scale(1,1)',
    transition: 'all 0.5s ease-in',
  }

  return (
    <button
       onMouseEnter={props.handleButtonHover}
       onMouseLeave={props.handleButtonHover}
      {...remainingProps}
    >
      {label}
      {props.children}
    </button>
  )
}

export default Button