score:2
you can put the inner components in an array, iterate over them and then render them. something like this:
var react = require('react/addons');
// components
var textblock = require('../text_block.jsx');
var paperheader = require('../header_paper.jsx')
var sectionheader = require('../header_section.jsx');
var tableofcontents = require('../table_of_contents.jsx');
var page = react.createclass({
render: function() {
var contents = [
<paperheader title={"page title"} authors={["cole gleason"]} />,
<sectionheader title={'first section'} size={'large'} />,
<textblock key={"text_first"}>
<p>
text goes here.
</p>
</textblock>,
<this.props.activeroutehandler/>
];
var titles = contents.map(function(item) {
if (item.title && some_other_requirement) {
return item.title;
}
return undefined;
});
return (
<div>
<toc titles={titles} />
{contents}
</div>
);
}
});
module.exports = page;
but i can't help but feel like you're not really using react for the right reason and in the right way. you're treating react components like simple templates. something like this makes more sense:
var react = require('react/addons');
// components
var page = require('../page.jsx');
var section = require('../section.jsx');
var textblock = require('../textblock.jsx');
var app = react.createclass({
render: function() {
return (
<page title='page title'>
<section title='section title'>
<textblock>
<p>text goes here</p>
</textblock>
<textblock>
<p>text goes here</p>
</textblock>
</section>
<this.props.activeroutehandler />
</page>
);
}
});
module.exports = app;
it's important to give things the right structure. i think this makes more sense because there's now a real relation between parents and children. textblocks that belong to a section should be situated inside the section. now this doesn't solve your table of contents problem but it's a start. it helps, for example, that now all direct children of page
are sections
, so you could do more with that.
if you want to build a real dynamic table of contents at runtime you should look into another place to store your content. you're mixing templates with content right now, and that's not ideal. communication in react components really only goes in one way (down the tree), so trying to pass data from a component back to a sibling or parent is not easy nor a good idea. look into flux for more about how your data should flow.
another good read: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
Source: stackoverflow.com
Related Query
- Creating dynamic table of contents in ReactJS
- React.js creating a table with a dynamic amount of rows with an editable column
- reactjs creating part of the table scrollable
- Creating collapsible table cells with Bootstrap 4 and ReactJS
- Creating dynamic table, Object.keys not allowing to return rows of table react
- Creating dynamic table
- Total for columns in dynamic table using ReactJS
- Dynamic table component in ReactJs
- Problem creating a table with dynamic column cells
- ReactJS multi-input form to dynamic table
- Dynamic Table updates "too late" ReactJS
- React.js Creating a Dynamic table with Dynamic Columns and Dynamic Rows
- Creating dynamic elements with js array in reactjs
- ReactJs - creating a dynamic list
- Pulling the next row of data from a dynamic table into a dialog in ReactJS
- Creating dynamic table with data fetched from API in JS React Bootstrap
- Creating Search functionality in reactJs for Table content
- Table with dynamic content ReactJS
- How create a customize dynamic table in reactjs
- Is there any way to integrate reactjs with postgres for creating dynamic dependent dropdown?
- how to remove duplicating data entry in a row when creating a table with reactjs
- Antd Creating Dynamic Form Item inside table
- Creating Dynamic table in react js with material ui
- Reactjs setState() with a dynamic key name?
- Dynamic attribute in ReactJS
- ReactJs - Creating an "If" component... a good idea?
- What exactly is Dynamic Routing in ReactJS
- React.js - Creating simple table
- Load images based on dynamic path in ReactJs
- Correct way of Creating multiple stores with mobx and injecting it into to a Component - ReactJs
More Query from same tag
- Reactjs material icons in css
- Hiding a component with React
- How can I print the Firebase array elements that I see in the console, to display them on the webpage?
- React Redux router saga material-ui and tabs corresponding to current route
- what is the difference between import Task and import { Task } in es6
- React JS onClick set state of clicked index
- Trouble disabling react-hooks/exhaustive-deps warning when using redux action creator inside useEffect hook
- having difficulty in debugging reducers in redux
- I get two errors that I could not solve in return ESLint and destructing
- Conditional within a conditional
- React - Jest/Enzyme changed trigger function
- NextJS SWR multiple API calls returnin undefined
- having default data as selected in select material ui
- React state - what I am doing wrong?
- Why am I getting 'undefined:x:y : property' missing error when running jest tests?
- Render JSON data (from reddit API) with reactjs
- Array manipulation/mapping returning undefined
- Back button react native doesnt closes the app
- React - Search & filter through a data set
- How to dynamically display a number of input fields based on a number given on a previous field on that page in react
- How to make a react component that can be rendered with no data and later rendered with data?
- React ajax render
- Fetching a github repo in react gives a "Module "stream" has been externalized for browser compatibility and cannot be accessed in client code" error
- useEffect hook not firing on orientation change
- How to integrate loading screen on route change with redux in Next.js
- What is the point of useEffect() if you don't specify a dependancy
- Checking React defaultProps with Flow
- Prevent child component from unmounting and remounting if parent component changes
- React and Jest: How to mock implementation of member function
- Get the number of years between two dates with momentjs? Not full years