HTML 페이지에서 데이터를 React 컴포넌트로 전달하는 올바른 방법이 있습니까?
이런 리액트 앱이 있어요.
var X = React.createClass({
componentDidMount: function() {
fetch(this.props.feed).then(...);
}
render: function() {
return <div>{this.props.feed}</div>
}
});
피드 프롭은 특정 고객 고유의 컴포넌트 DidMount에서 JSON 피드를 얻기 위해 사용됩니다.
HTML에서 데이터를 리액트 앱으로 전달하여 파라미터화하는 것이 편리합니다.
<html>
<body>
<div id="app" feed='custom_feed.json'></div>
</body>
</html
현재의 솔루션은 다음과 같습니다.
var root = document.getElementById('app');
var feed = root.getAttribute('feed')
ReactDOM.render(<X feed={feed}/>, root);
이것은 분명히 효과가 있지만 좀 더 관용적인 해결책이 있어야 할 것 같다.이를 위한 더 많은 React 방법이 있습니까?
사용한 적이 있다data-다양한 소품에 대한 속성을 가진 다음 파괴 기능을 사용하여 모든 소품을 전달합니다. 예를 들어, 다음과 같습니다.
HTML:
<div id="app" data-feed='custom_feed.json' data-someprop='value'></div>
JS:
var root = document.getElementById('app');
ReactDOM.render(<X {...(root.dataset)} />, root);
편집:데모 바이올린
2018년 편집: 업데이트된 바이올린
React와 관련된 데이터를 포함하는 페이지가 동적으로 생성되는 것과 같은 문제가 있었습니다.
나는 단지 그것들을 세계적인 범위로 선언했을 뿐이다.
<script>
window.foobles = [12,453,12];
window.bahs = ["bah", "bah", "black sheep"];
</script>
..그러면..
ReactDOM.render(
<Component
foobles={window.foobles}
bahs={window.bah}
/>,
document.getElementById('app')
)
네임스페이스의 관점에서 보면, 이것에는 몇개의 단점이 있을 가능성이 있습니다.
다음과 같이 컴포넌트를 마운트할 때 데이터를 전달할 수 있습니다.
<div id="root"></div>
<script>
const data = { foo: 'bar' };
ReactDOM.render(
React.createElement(MyComponent, data),
document.getElementById('root')
);
</script>
React Habit은 재사용 및 확장이 가능한 무언가를 원하는 경우 이를 지원하는 프레임워크입니다.
리액트 컴포넌트를 이렇게 등록합니다.
containerBuilder.register(Feed).as('Feed')
그런 다음 HTML에서 소품으로 대상을 정의합니다.
<div data-component="Feed" data-prop-feed-src="/custom_feed.json">
리액트 해비타트는 HTML에 표시될 때마다 이러한 내용을 연결합니다.
공개:저는 이 프레임워크의 주요 관리자들 중 한 명입니다.
언급URL : https://stackoverflow.com/questions/36545118/is-there-a-right-way-to-pass-data-into-a-react-component-from-the-html-page
'programing' 카테고리의 다른 글
| ORACLE IIF 스테이트먼트 (0) | 2023.03.13 |
|---|---|
| Json Schema에서 샘플 Json 출력 생성 (0) | 2023.03.13 |
| 레일에서 JSON 문자열을 JSON 어레이로 변환하시겠습니까? (0) | 2023.03.13 |
| PostgreSQL 반환 결과를 JSON 어레이로 설정하시겠습니까? (0) | 2023.03.13 |
| 부분 뷰를 바인딩하기 위해 ko.applyBindings를 호출할 수 있습니까? (0) | 2023.03.13 |