I need create a component to render like this:
<div class="row">
<div class="col">
<div class="some another class">
<h3>{{title}}</title>
</div>
</div>
<div class="col">
<p>{{contentA}}</p>
</div>
<div class="row">
<div class="some wrapper">
<p>{{contentB}}</p>
<div>
</div>
<div>
It will receive the following data:
title - a string
contentA - a large string (paragraph), may contain
links (a href)
contentB - a large string or a complex HTML code
Here are the following methods I found. However, I'm not sure about which one is the recommended way by React.
Method 1
<Component title="a" contentA="some large content" contentB="another large content"/>
Pros: Easy to access different props in different sections of the component
Cons: Too complex to handle if the content as large HTML content
Method 2
<Component>
<title>a</title
<content>some large content</content>
<content>another large content</content>
</Component>
Pros: Much simpler code
Cons: Need to filter props.children and find each element to put in correct place in the component
This is not really an accurate statement:
Cons: Too complex to handle if the content as HTML contents
If a value can be held in a variable as a string, it can be used as an argument passed into your component. If you don't want to be bothered trying to escape the quotes inside your prop values, I would encourage you to ditch the <Component attr="someValue"/> syntax and instead use <Component attr={'someValue'}/>. This allows you to pass variables into your props. This also allows you to use template literals to pass values, like so:
<Component
title="a"
contentA={`
<html>
<head></head>
<body>
<p>Here is my super-big</p>
<p>HTML-infused content</p>
<p>I can even inject ${variables} in here!</p>
</body>
</html>
`}
contentB="another large content"
/>
If you feel like that starts to clutter-up the declaration of your component, you can instead set those values in a variable and then pass them very cleanly into the component, as such:
render() {
const bigHtmlContent = (
<html>
<head></head>
<body>
<p>Here is my super-big</p>
<p>HTML-infused content</p>
<p>I can even inject {variables} in here!</p>
</body>
</html>
);
return (
<Component
title="a"
contentA={bigHtmlContent}
contentB="another large content"
/>
);
}
Of course, you can move the definition out of the render() function altogether if that suits you better:
getBigHtmlContent() {
return (
<html>
<head></head>
<body>
<p>Here is my super-big</p>
<p>HTML-infused content</p>
<p>I can even inject {variables} in here!</p>
</body>
</html>
);
}
render() {
return (
<Component
title="a"
contentA={() => this.getBigHtmlContent()}
contentB="another large content"
/>
);
}
When I'm creating components, I tend to pass everything as props (as shown in the examples above). I only use children if I'm creating a higher-order component which, by design, is supposed to act as a container for certain types of children.
For example, in Material UI there is a <List> component which requires one-or-more <ListItem>s. In that case, I don't think it would make much sense to pass the <ListItems>s as props. They are (and should be) children of the <List> component.
React is all about creating granular components, the more granular you component tree is, you are doing it the more React way.
You say you get 3 things text,contentA and ContentB
Title: it's already granular.
content A: You say its a "a large string (paragraph), may container links (a href)"
, if its a paragraph it is granular but if its a collection of paragraphs, I think you should take that to a different component. Ex: ContentA component
Content B: This is clearly said that its a complex HTML code, that is what is React for, you need to break this complex HTML code into granular components which will make it more maintainable and it is a React best practice too.
have patience while breaking this into components, it's definitely worth it.
hope that helps.
Related
I am building a website with Nextjs and have my course lessons stored in a different file. In there I have String containing content like for example
taskInfo: `
<h1 className="task-section__info-header px-task pt-task-header">Hello World!</h1>
<div className="task-section__info-description px-task">
For this lesson, we will be creating a simple "Hello World!" program.
<br />
If you forgot how to do this, revisit the previous lesson.
<div className="task-section__code">
<CodeSnippet
language="javascript"
>
console.log("Hello World!");
</CodeSnippet>
</div>
`,
My goal now is to pass this string as a prop to a component and display that string on the screen with the components and the rendered HTML. I've tried things like html-to-react or unified or babel, but they all provided their own errors and didn't work. Html-To-React, for example, only converts the HTML but not the component.
I have a GatsbyJS site that I am working on where the main content source is a Wordpress install. One of the things I like to add to my sites is the ability to have placeholder areas in the site where I can control the content via the CMS. Usually I have a header_scripts area that goes at the bottom of the <head> tag, a body_scripts area that goes at the start of the <body> tag, and a footer_scripts area that goes at the bottom of the page <body>. With these three, I can usually integrate third-party add-ins pretty easily without having to do code deployments.
Sometimes I need to embed stylesheets, sometimes I need to embed script tags, and sometimes I need to throw in <meta> tags. Really the content could be anything. This data comes back as a raw string from my Wordpress GraphQL endpoint.
So now my question is, how do I get this content injected into my Gatsby site in the following places:
<html>
<head>
...
{header_scripts}
</head>
<body>
{body_scripts}
...
{footer_scripts}
</body>
</html>
I've found so far that I can just include the body_scripts and footer_scripts in a fairly regular manner in my Gatsby page template. In gatsby-node.js, I pass in the property values using the pageContext. It's kind of a bummer that they need to be wrapped in a <div /> tag, but they seem to work just fine.
import React from 'react'
export default class PageTemplate extends React.Component {
render = () => {
return (
<React.Fragment>
{this.props.pageContext.bodyScripts && (
<div dangerouslySetInnerHTML={{__html:this.props.pageContext.bodyScripts}} />
)}
{/* my page content here */}
{this.props.pageContext.footerScripts && (
<div dangerouslySetInnerHTML={{__html:this.props.pageContext.footerScripts}} />
)}
</React.Fragment>
)
}
}
Now for the real question. I am stumped on how to get the dynamic content from the header_scripts into the Gatsby server-side-rendering <head> tag. The closest thing I have found to being able to inject content into the head is to leverage the gatsby-ssr.js onRenderBody function. However, this seems to require pre-determined React component instances in order to function. I can't just pass it in plain raw string content and see the output in the page source:
export const onRenderBody = async ({
pathname,
setHeadComponents,
setHtmlAttributes,
setBodyAttributes,
setPreBodyComponents,
setPostBodyComponents,
setBodyProps
}, pluginOptions) => {
setHeadComponents(['<script>alert("hello");</script>'])
}
This results in an escaped string getting inserted into the <head> tag:
<html>
<head>
...
<script>alert("hello");</script>
</head>
<body>
...
</body>
</html>
I'm at a loss as to how to proceed. I can't just wrap my string in a <div /> tag like in the body because div tags can't go inside the head tag. I can't think of any head-capable HTML tags that would accept this kind of content.
The only idea I've had is to actually parse the string content into full React components. This seems daunting given the number of possible tags & formatting that I would need to support.
Am I going about this the wrong way? How can I get my arbitrary content into my Gatsby site's head tag?
It's a broad question and it will need some trials and errors to ensure that it's fully working without caveats in all scenarios but, among the things you've tried, you can add a few more options to the list to check which ones fit better.
Regarding the body_scripts and footer_scripts both can be inserted using the:
<div dangerouslySetInnerHTML={{__html:this.props.pageContext.footerScripts}} />
In any desired page or template. For the header_scripts and the meta tags (SEO), you can use the <Helmet> component. Basically, using this component, everything that is wrapped inside, it's becomes transpiled inside the <head> tag once compiled.
export default class PageTemplate extends React.Component {
render = () => {
return (
<React.Fragment>
<Helmet>
{this.props.pageContext.headerScripts && (
<div dangerouslySetInnerHTML={{__html:this.props.pageContext.headScripts}} />
)}
</Helmet>
{this.props.pageContext.bodyScripts && (
<div dangerouslySetInnerHTML={{__html:this.props.pageContext.bodyScripts}} />
)}
{/* my page content here */}
{this.props.pageContext.footerScripts && (
<div dangerouslySetInnerHTML={{__html:this.props.pageContext.footerScripts}} />
)}
</React.Fragment>
)
}
}
However, if the data comes from a CMS, it won't be available in the SSR yet, so, one easy thing you can do is to customize the outputted HTML (html.js) that Gatsby generates in each compilation. From the docs:
Customizing html.js is a workaround solution for when the use of the
appropriate APIs is not available in gatsby-ssr.js. Consider using
onRenderBody or onPreRenderHTML instead of the method above. As a
further consideration, customizing html.js is not supported within a
Gatsby Theme. Use the API methods mentioned instead.
Run:
cp .cache/default-html.js src/html.js
Or manually, copy the .cache/default-html.js file and paste it /src folder. There you can customize the final HTML.
I have a bunch of screens that follow one of two main layouts. I'm trying to figure out a way that I could turn them into page templates and reuse them to cut down on repeating all the boiler plate markup. I already have reusable components for things like headers, footers, etc. My first attempt was to create layout component building blocks that use ng-content to insert the content that is different for each page. I wanted to have something like this:
<layout>
<layout-header>
<header title="..."></header>
</layout-header>
<layout-content>
<layout-left>
<div> -- LEFT CONTENT GOES HERE -- </div>
</layout-left>
<layout-right>
<div> -- RIGHT CONTENT GOES HERE -- </div>
</layout-right>
</layout-content>
<layout-footer>
<footer></footer>
</layout-footer>
</layout>
The idea is that each component (layout, layout-header, etc) would produce the n lines of layout markup that I had been copying into each page. I am using bootstrap to do the actual layout within each component's template. The template for the main layout component looks something like this:
<div class="h-100 d-flex flex-column">
<ng-content select="layout-header"></ng-content>
<ng-content select="layout-content"></ng-content>
<ng-content select="layout-footer"></ng-content>
</div>
This looked like it would work but the main problem is that the host tags, layout-right for example, stay in the resulting markup and interfere with the actual layout. I could do something like this (but I don't want to):
<layout class="h-100 d-flex flex-column">
<layout-header class="...">
<header title="..."></header>
</layout-header>
<layout-content class="...">
<layout-left class="...">
<div> -- LEFT CONTENT GOES HERE -- </div>
</layout-left>
<layout-right class="...">
<div> -- RIGHT CONTENT GOES HERE -- </div>
</layout-right>
</layout-content>
<layout-footer class="...">
<footer></footer>
</layout-footer>
</layout>
Having to repeat the classes in every page kind of defeats the purpose.
Anyhow, wondering if there is an Angular way of building reusable layouts like this? Or is there something I'm just missing?
I have a question regarding React patterns. When rendering a component, is it appropriate for this component to render several sub-components, or is it ok to render some HTML in the parent component. Example:
If I have a box that has a heading and a body with list of elements, should I do:
var Box = React.createClass({
render: function() {
<div className="box">
<HeadingBox />
<BodyBox />
</div>
}
});
Or is it ok to do this:
var Box = React.createClass({
render: function() {
<div className="box">
<div className="heading">
<div> Heading1 </div>
<div> Heading2 </div>
</div>
<BodyBox />
</div>
}
});
Any rules to follow here?
It all depends on a context.
The general practice is that if you want to reuse the markup anywhere — you should go with the separate component, so you don't have to repeat yourself. Also if you find yourself writing a large portion of HTML (over 50 lines, for example), separating it into subcomponents will also help.
In other cases, just going with plain HTML will do.
You can find a good description on how best to organize your React code here. (section Separating UI details from interaction logic)
React is no different then other programming framework — it goes best with DRY (Don't repeat yourself).
So I'm trying to build a full page in Reactjs but some components are persisted throughout pages. The structure is something like this:
<div>
{showHeader ? header : ''}
{showNav ? nav : ''}
<div className="main">
<section className="left">
{this.props.children}
</section>
<section className="right>
<section className="persist-this"/>
{moreStuff}
</section>
</div>
</div>
During rerendering is the structure change is significant enough (changing from a page with header & nav to no header/no nav the persist-this section will be re-rendered as well.
Right now I'm actually doing React.renderComponent for each individual pieces & keep the structure static (so like renderComponent for header, nav, left section & moreStuff separately) & I wonder if there's a better way to doing this?
EDIT: I think I do know why this got re-rendered. I guess my question now becomes more like how to organize my structure better. So I got BasePage.jsx which has the structure above & in other pages (like HomePage.jsx or OtherPage.jsx) I do:
var HomePage = React.createClass({
render: function () {
<BasePage>
<p>Home</p>
</BasePage>
}
});
I think when I do React.renderComponent it see <HomePage> & <OtherPage> as 2 completely different Components although they are wrapped by the same <BasePage>, thus unmounting the Page. Should I separate the differences of those pages into mixins?, then always renderComponent(<BasePage>, el) to prevent unmounting?
If something persists between pages, the correct way to do it would be to separate your structure so that whatever persists only shares an ancestor which also persists.
In other words, you should structure it like this:
<div id="siteRoot">
<div className="dynamic">
{showHeader ? header : ''}
{showNav ? nav : ''}
<div className="main">
<section className="left">
{this.props.children}
</section>
</div>
</div>
<div className="persist-this">
<section className="right>
<section/>
{moreStuff}
</section>
</div>
</div>
Then your css should adapt to your new dom hierarchy and update your layout accordingly.
Now when you switch content in your dynamic section, React will automatically know that it doesn't need to re-render anything in the persist section - since nothing was changed there.