reactjs - 反应你不能在常规函数中传递道具，但你可以通过类组件传递道具

Question

我尝试创建一个类并在 Time 组件下传递名为 input 的道具，道具呈现道具名称但是我做同样的事情，但我没有使用类，而是使用名为 Kite 的函数并尝试做同样的事情，但我得到了控制台中的对象错误并且页面上没有呈现任何内容有没有一种方法可以通过常规函数而不是类传递道具？

function Kite() {
  return (<h1>{this.props.kiteprop}</h1>)
}

class Time extends React.Component {
  render() {
    return (
      <div>
        <Test input="dsa" />
        <Kite kiteprop="showtext" />
        <div>{this.props.input}</div>
        <span>{new Date().toLocaleDateString()}</span>
      </div>
    );
  }
}

ReactDOM.render(<Time input="joe" input="[1, 2]" input="false" />, document.getElementById("root"));

标签： reactjs

Answer 1

更好的语法是：

const Kite = (props) => {
    return(<h1>{props.kiteprop}</h1>)
}
export default Kite;

并将组件分成两页js。

请注意，我们将 props 传递到组件的参数中，此处无需使用this。