react-z / react-tab-view Goto Github PK
View Code? Open in Web Editor NEWa simple tabs control
a simple tabs control
I have a react component:
import React from 'react';
var ReactDom = require('react-dom');
Drawing = React.createClass({
componentDidMount: function() {
var el = ReactDom.findDOMNode(this); // This is de div we are rendering
var svg = d3.select(el)
.append("svg");
//.attr("viewBox", "0 0 100 100")
//.attr("preserveAspectRatio", "xMidYMid meet");
var circleSelection = svg.append("circle")
.attr("cx", 25)
.attr("cy", 25)
.attr("r", 25)
.style("fill", "purple");
},
render: function() {
return (
<div className="drawing" style={{"border":"1px solid black"}}></div>
);
}
});
If I try to insert it in a tab structure like this:
render() {
return (
<Tabs headers ={["Drawing", "Import", "Color Legend", "Tube Sheet", "3D", "Report"]} >
<Tab >
<div className="buttons">
<button>
Fun
</button>
<button>
Move
</button>
</div>
<Drawing />
</Tab>
<Tab>
<h1>Import</h1>
</Tab>
<Tab >
<h1>Color Legend</h1>
</Tab>
<Tab >
<h1>Tube Sheet</h1>
</Tab>
<Tab>
<h1>3D</h1>
</Tab>
<Tab>
<h1>Report</h1>
</Tab>
</Tabs>
);
}
I get this Warning: Failed prop type: Invalid prop children
of type array
supplied to Tab
, expected object
.
in Tab
The component works elsewhere without error. I even broke down the Drawing react component so it only returned a div and it was still putting out this warning.
I had the following code which is being mounted in flow router. I just got an unordered list of "heading1"," heading2", then two paragraphs of "This is the first tab's content", and "This is the second tab's content", but no tabs. I was really looking for a nice lightweight tab component like this. I wish it would have worked.
import { Tabs, Tab } from 'react-tab-view';
import React, { Component, PropTypes } from 'react'
TabComponent = React.createClass({
render() {
return(
<div>
<Tabs headers={['heading 1', 'heading 2']}>
<Tab>
<p>This is the first tab's content</p>
</Tab>
<Tab>
<p>This is the second tab's content</p>
</Tab>
</Tabs>
</div>
);
}
});
I want to change the style, but I can't do this
import styled from 'styled-components';
import { Tabs } from 'react-tab-view';
export default styled(Tabs)`
border: 0;
background: ${({ theme }) => theme.colors.eden};
box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
border-radius: 10px;
`;
When using the package, a warning is thrown constantly with the following message:
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Tabs. See https://fb.me/react-warning-keys for more information.
As far as I am concerned, there is a key missing for the render function in tabs.js
I have tried to include a key and it worked.
Could this issue please be fixed ?
Will this continue to be supported with the new version of react?
getting the following console warning, I believe due to this component. Do you have any plans to update it?
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.