Прохождение реквизита между компонентами

Question

Я создаю немного игровой площадки, чтобы узнать, реагируют, и я попал в дорожный блок с передачей реквизита между компонентами. У меня по существу есть два компонента: 1 - базовый компонент, а затем другой, который отображает его на странице с некоторыми дополнительными функциями (которые я удалил для простоты). Я по существу хочу, чтобы иметь возможность повторно использовать предметы в других местах.

Я бы хотел, чтобы при рендеринге компонента в примере укажите, является ли оно type=submit, если ничего не указано по умолчанию type=button.

У меня явно отсутствует точка здесь, потому что я получаю ошибку Cannot read property 'props' of undefined с нижеследующим кодом. Любая помощь будет оценена

Компонент Кнопка

import React, {PropTypes} from 'react'; 
import './button_component.scss'; 

const propTypes = { 
    type: PropTypes.string 
} 

const ButtonComponent =() => { 
    return <button type={this.props.type}>button</button> 
} 

ButtonComponent.propTypes = propTypes; 
export default ButtonComponent; 

Тогда у меня есть компонент, который выводит мой деталь

import React from 'react'; 
import ButtonComponent from './button_component'; 
import Example from './example' 

export default() => 
    <Example> 
     <ButtonComponent type='button' /> 
    </Example>; 

Answer 1

ButtonComponent является functional component. Следовательно, вы не можете использовать this.props в своем коде.

Вы должны ввести props рассуждение

const ButtonComponent = (props) => { 
    return <button type={props.type}>button</button> 
} 

объектов деструктурирующие и defaultProps может помочь вам сделать ваш код проще

const ButtonComponent = ({ type }) => { 
    return <button type={type}>button</button> 
} 

ButtonComponent.defaultProps = { 
    type: 'button' 
} 

, то вы можете просто положить <ButtonComponent /> вынести кнопку.