Как ссылаться на элемент в дочернем компоненте?

Я хочу ссылаться на элемент, который находится в дочернем компоненте. Я использую document.getElementById от его родительского компонента, и он работает хорошо, но я слышал, что лучше использовать ref. Это правда? Если да, то как это делается?Как ссылаться на элемент в дочернем компоненте?

Родителя (контейнер) компонент:

import CanvasView from '../view/CanvasView' 

export default class CanvasContainer extends Component { 
    componentDidMount(){ 
    var c = document.getElementById('canvas') 
    //DO SOMETHING WITH c 
    } 

    render(){ 
    return(
     <CanvasView /> 
    ) 
    } 
}

ребенок (презентация) компонент:

export default const CanvasView =() => (
    <canvas id="canvas"></canvas> 
)

источник

2016-06-04 allegutta

с лицами без компонентов, которые вы не можете использовать 'refs', однако вы можете его с' React.Component' и 'React.createClass' как так - https://jsfiddle.net/ 69z2wepo/44464/ –

А, ок. Рекомендуете ли вы использовать 'React.Component', а затем использовать' ref' вместо компонента без состояния с 'getElementById' в родительском компоненте? – allegutta

с помощью 'getElementById' с React это плохие практики ... –

Использование РЕАКТОГО события жизненного цикла несколько хаотично, запрашивая DOM для элементов плохо практика. Кроме того, поскольку дочерние компоненты имеют собственный жизненный цикл, сложно справиться с этими ситуациями. Кроме того, вы не можете получить доступ к дочернему элементу refs, поскольку родительские компоненты не имеют доступа к дочерним элементам refs. Однако вы можете передать функцию обратного вызова и передать выбранный дочерний элемент в качестве ссылки на родительский компонент.

var CanvasView = React.createClass({ 
    componentDidMount(){ 
    console.log('Child component did mount, do your stuff') 
    this.props.callback(this.exampleRef) 
    }, 
    render: function(){ 
    return(<div ref={(ref) => this.exampleRef = ref}>Foo</div>) 
    } 
}); 

var CanvasContainer = React.createClass({ 
    doSomethingWithChild(child){ 
    console.log('Parent component') 
    child.style.backgroundColor='red'; 
    }, 
    render: function(){ 
    return(<CanvasView callback={(e) => this.doSomethingWithChild(e)}/>); 
    } 
}); 

ReactDOM.render(<CanvasContainer/>,document.getElementById('app'));

https://jsfiddle.net/nwwzyttt/2/

источник

2016-06-05 02:57:01 Theodore

Как ссылаться на элемент в дочернем компоненте?

ответ

Смежные вопросы