Question

我试图将简单属性从我的子组件传递到父组件。我不能为我的生活理解为什么我得到这个错误。我对react的理解是你可以在任何函数或类中声明props（即this.props.text），然后将它传递给父。

Tickerbox.js（孩子）

import React from 'react';
import './App.css';
function Tickerbox(props) {
 return (
    <div className="container">
        <div className="row">
            <div className="col-sm-6">
                <h1></h1>;
            </div>
            <div className="col-sm-6">
                <h1>{this.props.text}</h1>;
            </div>
        </div>
    </div>
    );
}


export default Tickerbox;

App.js（parent）

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Tickerbox from './TickerBox';


class App extends Component {
 constructor(props) {
  super(props);
  this.state = {
   day: 'monday',
   month: 'january',
   year: '1st',
 };
 }


render() {
     return (
       <div className="App">
       <link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/>
       <div className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h2>Hi</h2>
       </div>
       <div className="container">
         <div className="row">
           <div className="col-sm-2 col-sm-push-3">day</div>
           <div className="col-sm-2 col-sm-push-3">month</div>
           <div className="col-sm-2 col-sm-push-3">year</div>
           <Tickerbox text="test"></Tickerbox>
         </div>
       </div>
     </div>
   );
 }
  }

  export default App;

Index.js（切入点）

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Answer 1

Tickerbox它是stateless组件。

无状态组件声明为函数

您正尝试访问this.props.text，但您已在参数props

中拥有道具

而不是使用this使用传递的props作为该组件的实际道具

Tickerbox.js

import React from 'react';
import './App.css';
function Tickerbox(props) {
 return (
    <div className="container">
        <div className="row">
            <div className="col-sm-6">
                <h1></h1>;
            </div>
            <div className="col-sm-6">
                <h1>{props.text}</h1>;
            </div>
        </div>
    </div>
    );
}


export default Tickerbox;

Answer 2

问题是我们无法在功能组件中访问this.props.text。它应该是props.text或使其成为基于类的组件。

<h1>{props.text}</h1>;

无法读取'undefined'的道具类型

2 个答案: