Javascript 反应-如何呈现嵌套组件而不是[object]？
我用Javascript 反应-如何呈现嵌套组件而不是[object]？,javascript,reactjs,Javascript,Reactjs,我用手风琴，手风琴项目，和链接做了一个小测验，有几个问题/答案。 除了链接，所有功能都很好，当它位于小提琴中的手风琴组件第50行之外时，效果非常好，但当它嵌套在小提琴中的示例问题>问题1>答案第59行时，效果并不理想 答案如下： 渥太华宝贝！！查看[对象]了解更多详细信息。 而不是想要的链接：渥太华宝贝！！查看维基百科链接b了解更多详细信息。 下面是代码供参考，但我建议直接跳到代码下面的小提琴上，单击第一个问题，直接查看问题 class Link extends React.Component
手风琴手风琴项目链接链接示例问题>问题1>答案渥太华宝贝！！查看[对象]了解更多详细信息。渥太华宝贝！！查看维基百科链接b了解更多详细信息。class Link extends React.Component {
render() {
return (
<span onClick={this.props.onClick} className="link">{this.props.linkTitle}</span>
);
}
}
class AccordionItem extends React.Component {
constructor() {
super();
this.state = {
active: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
active: !this.state.active,
className: "active"
});
}
render() {
const activeClass = this.state.active ? "active" : "inactive";
const question = this.props.details;
return (
<div className={activeClass} onClick={this.toggle}>
<span className="summary">{question.summary}</span>
<span className="folding-pannel answer">{question.answer}</span>
</div>
);
}
}
class Accordion extends React.Component {
constructor() {
super();
this.state = {
questions: sampleQuestions,
};
this.renderQuestion = this.renderQuestion.bind(this);
}
renderQuestion(key) {
return <AccordionItem key={key} index={key} details={this.state.questions[key]} />
}
render() {
return(
<div className="mainbody">
<h1>What is...</h1>
<Link onClick={() => alert('outside link works')} linkTitle={'wikipedia link a'} />
<div className="accordion-container">
{Object.keys(this.state.questions).map(this.renderQuestion)}
</div>
</div>
)
}
}
const sampleQuestions = {
question1: {summary:'the capital of Canada?', answer:'Ottawa baby!! Check ' + <Link onClick={() => alert('trying to get this nested link to show')} linkTitle={'wikipedia link b'} /> + ' for more details.'},
question2: {summary:'the life span of a bowhead whale?', answer:'Over 200 years!!'},
question3: {summary:'the most visited city in the world?', answer:'London, groovy baby!!'},
question4: {summary:'the warmest ocean?', answer:'Indian Ocean, it\'s a hottie!'},
question5: {summary:'the one thing ron swanson hates more than lying?', answer:'Skim milk, which is water that\'s lying about being milk'}
};
ReactDOM.render(
<Accordion />,
document.getElementById('accordion')
);
类链接扩展了React.Component{
render（）{
返回(
{this.props.linkTitle}
);
}
}
类AccordionItem扩展React.Component{
构造函数（）{
超级（）；
此.state={
活动：错误
};
this.toggle=this.toggle.bind（this）；
}
切换（）{
这是我的国家({
活动：！this.state.active，
类名：“活动”
});
}
render（）{
const activeClass=this.state.active？“active”：“inactive”；
const question=this.props.details；
返回(
{问题摘要}
{问题.答案}
);
}
}
类Accordion扩展了React.Component{
构造函数（）{
超级（）；
此.state={
问题：样本问题，
};
this.renderQuestion=this.renderQuestion.bind（this）；
}
渲染器问题（关键）{
返回
你知道如何获得[object object]
来为第一个问题的答案呈现所需的链接组件吗？一般来说，你不能将react组件放在字符串中。有一些方法可以做到这一点，即使用react jsx解析器
，但我们不会讨论这个问题
一种可能的解决方案是执行以下操作：设置一个哑组件来呈现子数组
const AnswerWithLink = (children) => {
return (
<span>{[...children]}</span>
)
}
不过，我相信还有更有效的方法
编辑：我还对代码笔进行了编辑以使其正常工作。最后还将
更改为哑组件，因为它是无状态的。这里有一种方法：利用React片段。
工作示例：
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<pattern id="pattern" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
<rect fill="rgba(159, 188, 191, 0.15)" x="0" width="20" height="20" y="0" />
<rect fill="rgba(159, 188, 191, 0.15)" x="20" width="20" height="20" y="20" />
</pattern>
<rect fill="url(#pattern)" x="0" y="0" width="100%" height="100%" />
</svg>
<div id="accordion"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<pattern id="pattern" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
<rect fill="rgba(159, 188, 191, 0.15)" x="0" width="20" height="20" y="0" />
<rect fill="rgba(159, 188, 191, 0.15)" x="20" width="20" height="20" y="20" />
</pattern>
<rect fill="url(#pattern)" x="0" y="0" width="100%" height="100%" />
</svg>
<div id="accordion"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<pattern id="pattern" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
<rect fill="rgba(159, 188, 191, 0.15)" x="0" width="20" height="20" y="0" />
<rect fill="rgba(159, 188, 191, 0.15)" x="20" width="20" height="20" y="20" />
</pattern>
<rect fill="url(#pattern)" x="0" y="0" width="100%" height="100%" />
</svg>
<div id="accordion"></div>
</body>
</html>
反应应用程序
您需要启用JavaScript才能运行此应用程序。
index.js
import React from "react";
import { render } from "react-dom";
import Accordian from "./Accordian";
import "./styles.css";
render(<Accordian />, document.getElementById("accordion"));
import map from "lodash/map";
import React, { Component } from "react";
import AccordionItem from "./AccordianItem";
import SampleQuestions from "./sampleQuestions";
export default class Accordion extends Component {
state = { questions: SampleQuestions };
render = () => (
<div className="mainbody">
<h1>What is...</h1>
<div className="accordion-container">
{map(this.state.questions, ({ key, ...rest }) => (
<AccordionItem key={key} {...rest} />
))}
</div>
</div>
);
}
import React, { Component } from "react";
export default class AccordionItem extends Component {
state = { isActive: false };
toggle = () => this.setState(prevState => ({ isActive: !this.state.isActive }));
render = () => (
<div
className={`${this.state.isActive ? "active" : "inactive"}`}
onClick={this.toggle}
>
<span className="summary">> {this.props.summary}</span>
<span className="folding-pannel answer">
{this.props.answer}
</span>
</div>
);
}
import React, { Fragment } from "react";
const Link = url => (
<a href={url} target="_blank">
here
</a>
);
export default [
{
key: "capital-of-canada",
summary: "the capital of Canada?",
answer: (
<Fragment>
Ottawa baby!! Click {Link("https://en.wikipedia.org/wiki/Ottawa")} for
more details
</Fragment>
)
},
{
key: "whale-lifespan",
summary: "the life span of a bowhead whale?",
answer: "Over 200 years!!"
},
{
key: "most-popular-city",
summary: "the most visited city in the world?",
answer: "London, groovy baby!!"
},
{
key: "warmest-ocean",
summary: "the warmest ocean?",
answer: "Indian Ocean, it's a hottie!"
},
{
key: "swanson",
summary: "the one thing ron swanson hates more than lying?",
answer: "Skim milk, which is water that's lying about being milk"
}
];
import React from "react";
import { render } from "react-dom";
import Accordian from "./Accordian";
import "./styles.css";
render(<Accordian />, document.getElementById("accordion"));
import map from "lodash/map";
import React, { Component } from "react";
import AccordionItem from "./AccordianItem";
import SampleQuestions from "./sampleQuestions";
export default class Accordion extends Component {
state = { questions: SampleQuestions };
render = () => (
<div className="mainbody">
<h1>What is...</h1>
<div className="accordion-container">
{map(this.state.questions, ({ key, ...rest }) => (
<AccordionItem key={key} {...rest} />
))}
</div>
</div>
);
}
import each from "lodash/each";
import React, { Component, Fragment } from "react";
import uuid from "uuid/v5";
export default class AccordionItem extends Component {
state = { isActive: false };
toggle = () => this.setState(prevState => ({ isActive: !this.state.isActive }));
render = () => (
<div
className={`${this.state.isActive ? "active" : "inactive"}`}
onClick={this.toggle}
>
<span className="summary">> {this.props.summary}</span>
<span className="folding-pannel answer">
{each(this.props.answer, prop => <Fragment key={uuid}>{prop}</Fragment>)}
</span>
</div>
);
}
import React from "react";
const Link = url => (
<a href={url} target="_blank">
here
</a>
);
export default [
{
key: "capital-of-canada",
summary: "the capital of Canada?",
answer: [
"Ottawa baby!! Click ",
Link("https://en.wikipedia.org/wiki/Ottawa"),
" for more details"
]
},
{
key: "whale-lifespan",
summary: "the life span of a bowhead whale?",
answer: ["Over 200 years!!"]
},
{
key: "most-popular-city",
summary: "the most visited city in the world?",
answer: ["London, groovy baby!!"]
},
{
key: "warmest-ocean",
summary: "the warmest ocean?",
answer: ["Indian Ocean, it's a hottie!"]
},
{
key: "swanson",
summary: "the one thing ron swanson hates more than lying?",
answer: ["Skim milk, which is water that's lying about being milk"]
}
];
import React from "react";
import { render } from "react-dom";
import Accordian from "./Accordian";
import "./styles.css";
render(<Accordian />, document.getElementById("accordion"));
import map from "lodash/map";
import React, { Component } from "react";
import AccordionItem from "./AccordianItem";
import SampleQuestions from "./sampleQuestions";
export default class Accordion extends Component {
state = { questions: SampleQuestions };
render = () => (
<div className="mainbody">
<h1>What is...</h1>
<div className="accordion-container">
{map(this.state.questions, ({ key, ...rest }) => (
<AccordionItem key={key} {...rest} />
))}
</div>
</div>
);
}
import React, { Component } from "react";
import sanitizeHtml from "sanitize-html";
export default class AccordionItem extends Component {
state = { isActive: false };
toggle = () => this.setState(prevState => ({ isActive: !this.state.isActive }));
sanitize = ans =>
sanitizeHtml(ans, {
allowedTags: ["a"],
allowedAttributes: {
a: ["href", "target"]
}
});
render = () => (
<div
className={`${this.state.isActive ? "active" : "inactive"}`}
onClick={this.toggle}
>
<span className="summary">> {this.props.summary}</span>
<span
className="folding-pannel answer"
dangerouslySetInnerHTML={{
__html: this.sanitize(this.props.answer)
}}
/>
</div>
);
}
const Link = url => `<a href=${url} target="_blank">here</a>`;
export default [
{
key: "capital-of-canada",
summary: "the capital of Canada?",
answer: `Ottawa baby!! Click ${Link("https://en.wikipedia.org/wiki/Ottawa")} for more details`
},
{
key: "whale-lifespan",
summary: "the life span of a bowhead whale?",
answer: "Over 200 years!!"
},
{
key: "most-popular-city",
summary: "the most visited city in the world?",
answer: "London, groovy baby!!"
},
{
key: "warmest-ocean",
summary: "the warmest ocean?",
answer: "Indian Ocean, it's a hottie!"
},
{
key: "swanson",
summary: "the one thing ron swanson hates more than lying?",
answer: "Skim milk, which is water that's lying about being milk"
}
];
从“React”导入React；
从“react dom”导入{render}；
从“/accorbian”导入手风琴；
导入“/styles.css”；
渲染(
);
导出默认值[
{
关键词：“加拿大首都”，
摘要：“加拿大首都？”，
答复:(
渥太华宝贝！！点击{链接（“https://en.wikipedia.org/wiki/Ottawa“）}用于
更多细节
)
},
{
关键：“鲸鱼寿命”，
摘要：“弓头鲸的寿命是多少？”，
回答：“200多年了！！”
},
{
关键：“最受欢迎的城市”，
总结：“世界上参观人数最多的城市？”，
回答：“伦敦，棒极了的宝贝！！”
},
{
关键：“最温暖的海洋”，
总结：“最温暖的海洋？”，
回答：“印度洋，这是一个辣妹！”
},
{
钥匙：“斯旺森”，
总结：“罗恩·斯旺森最讨厌的事情莫过于撒谎？”，
回答：“脱脂牛奶，就是谎称是牛奶的水”
}
];
这里有另一种方法：利用具有混合内容的数组。
工作示例：
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<pattern id="pattern" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
<rect fill="rgba(159, 188, 191, 0.15)" x="0" width="20" height="20" y="0" />
<rect fill="rgba(159, 188, 191, 0.15)" x="20" width="20" height="20" y="20" />
</pattern>
<rect fill="url(#pattern)" x="0" y="0" width="100%" height="100%" />
</svg>
<div id="accordion"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<pattern id="pattern" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
<rect fill="rgba(159, 188, 191, 0.15)" x="0" width="20" height="20" y="0" />
<rect fill="rgba(159, 188, 191, 0.15)" x="20" width="20" height="20" y="20" />
</pattern>
<rect fill="url(#pattern)" x="0" y="0" width="100%" height="100%" />
</svg>
<div id="accordion"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<pattern id="pattern" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
<rect fill="rgba(159, 188, 191, 0.15)" x="0" width="20" height="20" y="0" />
<rect fill="rgba(159, 188, 191, 0.15)" x="20" width="20" height="20" y="20" />
</pattern>
<rect fill="url(#pattern)" x="0" y="0" width="100%" height="100%" />
</svg>
<div id="accordion"></div>
</body>
</html>
反应应用程序
您需要启用JavaScript才能运行此应用程序。
index.js
import React from "react";
import { render } from "react-dom";
import Accordian from "./Accordian";
import "./styles.css";
render(<Accordian />, document.getElementById("accordion"));
import map from "lodash/map";
import React, { Component } from "react";
import AccordionItem from "./AccordianItem";
import SampleQuestions from "./sampleQuestions";
export default class Accordion extends Component {
state = { questions: SampleQuestions };
render = () => (
<div className="mainbody">
<h1>What is...</h1>
<div className="accordion-container">
{map(this.state.questions, ({ key, ...rest }) => (
<AccordionItem key={key} {...rest} />
))}
</div>
</div>
);
}
import React, { Component } from "react";
export default class AccordionItem extends Component {
state = { isActive: false };
toggle = () => this.setState(prevState => ({ isActive: !this.state.isActive }));
render = () => (
<div
className={`${this.state.isActive ? "active" : "inactive"}`}
onClick={this.toggle}
>
<span className="summary">> {this.props.summary}</span>
<span className="folding-pannel answer">
{this.props.answer}
</span>
</div>
);
}
import React, { Fragment } from "react";
const Link = url => (
<a href={url} target="_blank">
here
</a>
);
export default [
{
key: "capital-of-canada",
summary: "the capital of Canada?",
answer: (
<Fragment>
Ottawa baby!! Click {Link("https://en.wikipedia.org/wiki/Ottawa")} for
more details
</Fragment>
)
},
{
key: "whale-lifespan",
summary: "the life span of a bowhead whale?",
answer: "Over 200 years!!"
},
{
key: "most-popular-city",
summary: "the most visited city in the world?",
answer: "London, groovy baby!!"
},
{
key: "warmest-ocean",
summary: "the warmest ocean?",
answer: "Indian Ocean, it's a hottie!"
},
{
key: "swanson",
summary: "the one thing ron swanson hates more than lying?",
answer: "Skim milk, which is water that's lying about being milk"
}
];
import React from "react";
import { render } from "react-dom";
import Accordian from "./Accordian";
import "./styles.css";
render(<Accordian />, document.getElementById("accordion"));
import map from "lodash/map";
import React, { Component } from "react";
import AccordionItem from "./AccordianItem";
import SampleQuestions from "./sampleQuestions";
export default class Accordion extends Component {
state = { questions: SampleQuestions };
render = () => (
<div className="mainbody">
<h1>What is...</h1>
<div className="accordion-container">
{map(this.state.questions, ({ key, ...rest }) => (
<AccordionItem key={key} {...rest} />
))}
</div>
</div>
);
}
import each from "lodash/each";
import React, { Component, Fragment } from "react";
import uuid from "uuid/v5";
export default class AccordionItem extends Component {
state = { isActive: false };
toggle = () => this.setState(prevState => ({ isActive: !this.state.isActive }));
render = () => (
<div
className={`${this.state.isActive ? "active" : "inactive"}`}
onClick={this.toggle}
>
<span className="summary">> {this.props.summary}</span>
<span className="folding-pannel answer">
{each(this.props.answer, prop => <Fragment key={uuid}>{prop}</Fragment>)}
</span>
</div>
);
}
import React from "react";
const Link = url => (
<a href={url} target="_blank">
here
</a>
);
export default [
{
key: "capital-of-canada",
summary: "the capital of Canada?",
answer: [
"Ottawa baby!! Click ",
Link("https://en.wikipedia.org/wiki/Ottawa"),
" for more details"
]
},
{
key: "whale-lifespan",
summary: "the life span of a bowhead whale?",
answer: ["Over 200 years!!"]
},
{
key: "most-popular-city",
summary: "the most visited city in the world?",
answer: ["London, groovy baby!!"]
},
{
key: "warmest-ocean",
summary: "the warmest ocean?",
answer: ["Indian Ocean, it's a hottie!"]
},
{
key: "swanson",
summary: "the one thing ron swanson hates more than lying?",
answer: ["Skim milk, which is water that's lying about being milk"]
}
];
import React from "react";
import { render } from "react-dom";
import Accordian from "./Accordian";
import "./styles.css";
render(<Accordian />, document.getElementById("accordion"));
import map from "lodash/map";
import React, { Component } from "react";
import AccordionItem from "./AccordianItem";
import SampleQuestions from "./sampleQuestions";
export default class Accordion extends Component {
state = { questions: SampleQuestions };
render = () => (
<div className="mainbody">
<h1>What is...</h1>
<div className="accordion-container">
{map(this.state.questions, ({ key, ...rest }) => (
<AccordionItem key={key} {...rest} />
))}
</div>
</div>
);
}
import React, { Component } from "react";
import sanitizeHtml from "sanitize-html";
export default class AccordionItem extends Component {
state = { isActive: false };
toggle = () => this.setState(prevState => ({ isActive: !this.state.isActive }));
sanitize = ans =>
sanitizeHtml(ans, {
allowedTags: ["a"],
allowedAttributes: {
a: ["href", "target"]
}
});
render = () => (
<div
className={`${this.state.isActive ? "active" : "inactive"}`}
onClick={this.toggle}
>
<span className="summary">> {this.props.summary}</span>
<span
className="folding-pannel answer"
dangerouslySetInnerHTML={{
__html: this.sanitize(this.props.answer)
}}
/>
</div>
);
}
const Link = url => `<a href=${url} target="_blank">here</a>`;
export default [
{
key: "capital-of-canada",
summary: "the capital of Canada?",
answer: `Ottawa baby!! Click ${Link("https://en.wikipedia.org/wiki/Ottawa")} for more details`
},
{
key: "whale-lifespan",
summary: "the life span of a bowhead whale?",
answer: "Over 200 years!!"
},
{
key: "most-popular-city",
summary: "the most visited city in the world?",
answer: "London, groovy baby!!"
},
{
key: "warmest-ocean",
summary: "the warmest ocean?",
answer: "Indian Ocean, it's a hottie!"
},
{
key: "swanson",
summary: "the one thing ron swanson hates more than lying?",
answer: "Skim milk, which is water that's lying about being milk"
}
];
从“React”导入React；
从“react dom”导入{render}；
从“/accorbian”导入手风琴；
导入“/styles.css”；
渲染(
);
导出默认值[
{
关键词：“加拿大首都”，
摘要：“加拿大首都？”，
答复:[
“渥太华宝贝！！点击”，
链接（“https://en.wikipedia.org/wiki/Ottawa"),
“有关详细信息”
]
},
{
关键：“鲸鱼寿命”，
摘要：“弓头鲸的寿命是多少？”，
回答：[“超过200年！！”]
},
{
关键：“最受欢迎的城市”，
总结：“世界上参观人数最多的城市？”，
回答：[“伦敦，漂亮宝贝！！”]
},
{
关键：“最温暖的海洋”，
总结：“最温暖的海洋？”，
回答：[“印度洋，这是一个辣妹！”]
},
{
钥匙：“斯旺森”，
总结：“罗恩·斯旺森最讨厌的事情莫过于撒谎？”，
回答：[“脱脂牛奶，即谎称是牛奶的水”]
}
];
这里还有另一种方法：利用。
工作示例：
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<pattern id="pattern" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
<rect fill="rgba(159, 188, 191, 0.15)" x="0" width="20" height="20" y="0" />
<rect fill="rgba(159, 188, 191, 0.15)" x="20" width="20" height="20" y="20" />
</pattern>
<rect fill="url(#pattern)" x="0" y="0" width="100%" height="100%" />
</svg>
<div id="accordion"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<pattern id="pattern" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
<rect fill="rgba(159, 188, 191, 0.15)" x="0" width="20" height="20" y="0" />
<rect fill="rgba(159, 188, 191, 0.15)" x="20" width="20" height="20" y="20" />
</pattern>
<rect fill="url(#pattern)" x="0" y="0" width="100%" height="100%" />
</svg>
<div id="accordion"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<pattern id="pattern" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
<rect fill="rgba(159, 188, 191, 0.15)" x="0" width="20" height="20" y="0" />
<rect fill="rgba(159, 188, 191, 0.15)" x="20" width="20" height="20" y="20" />
</pattern>
<rect fill="url(#pattern)" x="0" y="0" width="100%" height="100%" />
</svg>
<div id="accordion"></div>
</body>
</html>
反应应用程序
您需要启用JavaScript才能运行此应用程序。
index.js
import React from "react";
import { render } from "react-dom";
import Accordian from "./Accordian";
import "./styles.css";
render(<Accordian />, document.getElementById("accordion"));
import map from "lodash/map";
import React, { Component } from "react";
import AccordionItem from "./AccordianItem";
import SampleQuestions from "./sampleQuestions";
export default class Accordion extends Component {
state = { questions: SampleQuestions };
render = () => (
<div className="mainbody">
<h1>What is...</h1>
<div className="accordion-container">
{map(this.state.questions, ({ key, ...rest }) => (
<AccordionItem key={key} {...rest} />
))}
</div>
</div>
);
}
import React, { Component } from "react";
export default class AccordionItem extends Component {
state = { isActive: false };
toggle = () => this.setState(prevState => ({ isActive: !this.state.isActive }));
render = () => (
<div
className={`${this.state.isActive ? "active" : "inactive"}`}
onClick={this.toggle}
>
<span className="summary">> {this.props.summary}</span>
<span className="folding-pannel answer">
{this.props.answer}
</span>
</div>
);
}
import React, { Fragment } from "react";
const Link = url => (
<a href={url} target="_blank">
here
</a>
);
export default [
{
key: "capital-of-canada",
summary: "the capital of Canada?",
answer: (
<Fragment>
Ottawa baby!! Click {Link("https://en.wikipedia.org/wiki/Ottawa")} for
more details
</Fragment>
)
},
{
key: "whale-lifespan",
summary: "the life span of a bowhead whale?",
answer: "Over 200 years!!"
},
{
key: "most-popular-city",
summary: "the most visited city in the world?",
answer: "London, groovy baby!!"
},
{
key: "warmest-ocean",
summary: "the warmest ocean?",
answer: "Indian Ocean, it's a hottie!"
},
{
key: "swanson",
summary: "the one thing ron swanson hates more than lying?",
answer: "Skim milk, which is water that's lying about being milk"
}
];
import React from "react";
import { render } from "react-dom";
import Accordian from "./Accordian";
import "./styles.css";
render(<Accordian />, document.getElementById("accordion"));
import map from "lodash/map";
import React, { Component } from "react";
import AccordionItem from "./AccordianItem";
import SampleQuestions from "./sampleQuestions";
export default class Accordion extends Component {
state = { questions: SampleQuestions };
render = () => (
<div className="mainbody">
<h1>What is...</h1>
<div className="accordion-container">
{map(this.state.questions, ({ key, ...rest }) => (
<AccordionItem key={key} {...rest} />
))}
</div>
</div>
);
}
import each from "lodash/each";
import React, { Component, Fragment } from "react";
import uuid from "uuid/v5";
export default class AccordionItem extends Component {
state = { isActive: false };
toggle = () => this.setState(prevState => ({ isActive: !this.state.isActive }));
render = () => (
<div
className={`${this.state.isActive ? "active" : "inactive"}`}
onClick={this.toggle}
>
<span className="summary">> {this.props.summary}</span>
<span className="folding-pannel answer">
{each(this.props.answer, prop => <Fragment key={uuid}>{prop}</Fragment>)}
</span>
</div>
);
}
import React from "react";
const Link = url => (
<a href={url} target="_blank">
here
</a>
);
export default [
{
key: "capital-of-canada",
summary: "the capital of Canada?",
answer: [
"Ottawa baby!! Click ",
Link("https://en.wikipedia.org/wiki/Ottawa"),
" for more details"
]
},
{
key: "whale-lifespan",
summary: "the life span of a bowhead whale?",
answer: ["Over 200 years!!"]
},
{
key: "most-popular-city",
summary: "the most visited city in the world?",
answer: ["London, groovy baby!!"]
},
{
key: "warmest-ocean",
summary: "the warmest ocean?",
answer: ["Indian Ocean, it's a hottie!"]
},
{
key: "swanson",
summary: "the one thing ron swanson hates more than lying?",
answer: ["Skim milk, which is water that's lying about being milk"]
}
];
import React from "react";
import { render } from "react-dom";
import Accordian from "./Accordian";
import "./styles.css";
render(<Accordian />, document.getElementById("accordion"));
import map from "lodash/map";
import React, { Component } from "react";
import AccordionItem from "./AccordianItem";
import SampleQuestions from "./sampleQuestions";
export default class Accordion extends Component {
state = { questions: SampleQuestions };
render = () => (
<div className="mainbody">
<h1>What is...</h1>
<div className="accordion-container">
{map(this.state.questions, ({ key, ...rest }) => (
<AccordionItem key={key} {...rest} />
))}
</div>
</div>
);
}
import React, { Component } from "react";
import sanitizeHtml from "sanitize-html";
export default class AccordionItem extends Component {
state = { isActive: false };
toggle = () => this.setState(prevState => ({ isActive: !this.state.isActive }));
sanitize = ans =>
sanitizeHtml(ans, {
allowedTags: ["a"],
allowedAttributes: {
a: ["href", "target"]
}
});
render = () => (
<div
className={`${this.state.isActive ? "active" : "inactive"}`}
onClick={this.toggle}
>
<span className="summary">> {this.props.summary}</span>
<span
className="folding-pannel answer"
dangerouslySetInnerHTML={{
__html: this.sanitize(this.props.answer)
}}
/>
</div>
);
}
const Link = url => `<a href=${url} target="_blank">here</a>`;
export default [
{
key: "capital-of-canada",
summary: "the capital of Canada?",
answer: `Ottawa baby!! Click ${Link("https://en.wikipedia.org/wiki/Ottawa")} for more details`
},
{
key: "whale-lifespan",
summary: "the life span of a bowhead whale?",
answer: "Over 200 years!!"
},
{
key: "most-popular-city",
summary: "the most visited city in the world?",
answer: "London, groovy baby!!"
},
{
key: "warmest-ocean",
summary: "the warmest ocean?",
answer: "Indian Ocean, it's a hottie!"
},
{
key: "swanson",
summary: "the one thing ron swanson hates more than lying?",
answer: "Skim milk, which is water that's lying about being milk"
}
];
从“React”导入React；
从“react dom”导入{render}；
从“/accorbian”导入手风琴；
导入“/styles.css”；
渲染（`；
导出默认值[
{
关键词：“加拿大首都”，
摘要：“加拿大首都？”，
回答：`渥太华宝贝！！点击${Link（'https://en.wikipedia.org/wiki/Ottawa）以获取更多详细信息`
},
{
关键：“鲸鱼寿命”，
摘要：“弓头鲸的寿命是多少？”，
回答：“200多年了！！”
},
{
关键：“最受欢迎的城市”，
总结：“世界上参观人数最多的城市？”，
回答：“伦敦，棒极了的宝贝！！”
},
{
关键：“最温暖的海洋”，
总结：“最温暖的海洋？”，
回答：“印度洋，这是一个辣妹！”
},
{
钥匙：“斯旺森”，
总结：“罗恩·斯旺森最讨厌的事情莫过于撒谎？”，
回答：“脱脂牛奶，这是水，这是