如何根据按钮的 ID 呈现数组的特定元素 onClick

Question

我遇到了以下问题。这是我的数组：

const countries = [
  {
    id: 1,
    props:
    {
      url: '/images/polska.jpg',
      title: 'Polska',
      width: width,
      content: "Text nr 1"
    }
  },
  {
    id: 2,
    props:
    {
      url: '/images/francja.jpg',
      title: 'Francja',
      width: width,
      content: "Text nr 2"
    }
  },
  {
    id: 3,
    props:
    {
      url: '/images/slovakia.jpg',
      title: 'Slovakia',
      width: width,
      content: "Text nr 3"
    }
  }
]

还有那些按钮：

const Buttons = () => {
  return (
    <div>
      {countries.map((country) => (
        <Button key={country.id} />
      ))}
    </div>
  )
}

需要发生的是onClick，在按钮下面，会显示一个内容，其中数组元素ID = 按钮id（键）。下面的代码被硬编码为始终显示第一个元素的内容，我不知道如何传递 ID 以使其正常工作。

const Button = () => {
  const [showContent, setShowContent] = useState(false)
  const content = countries[0].props.content

  console.log(content)

  return (
    <div>
      <div className='button'>
        <button onClick={() => { setShowContent(!showContent) }}>show</button>
      </div>
      <div>
        {showContent ? content : null}
      </div>
    </div>
  )
}

export default Button

Answer 1

您很接近，只是没有正确地将数据传递到 Button。

您需要做的就是将每个按钮的内容（国家/地区中的每个元素）传递到 Buttons 地图中的 Button 组件。

之前，您只是访问已存储的数组，请参阅下文了解您应该如何完成。

const Button = ({ content }) => {
    const [showContent, setShowContent] = useState(false);

    return (
        <div>
            <div className="button">
                <button
                    onClick={() => {
                        setShowContent(!showContent);
                    }}
                >
                    show
                </button>
            </div>
            <div>{showContent ? content : null}</div>
        </div>
    );
};
const Buttons = () => {
    return (
        <div>
            {countries.map((country) => (
                <Button key={country.id} content={country.props.content} />
            ))}
        </div>
    );
};

Answer 2

你应该mep方法。

const {
  useEffect,
  useState
} = React;

const width = 100;
const countries = [{
    id: 1,
    props: {
      url: '/images/polska.jpg',
      title: 'Polska',
      width: width,
      content: "Text nr 1"
    }
  },
  {
    id: 2,
    props: {
      url: '/images/francja.jpg',
      title: 'Francja',
      width: width,
      content: "Text nr 2"
    }
  },
  {
    id: 3,
    props: {
      url: '/images/slovakia.jpg',
      title: 'Slovakia',
      width: width,
      content: "Text nr 3"
    }
  }
]
const Button = () => {
  const [content, setContent] = useState()

  const handleClick = (id) => {
    const country = countries.find(x => x.id === id);
    setContent(country.props.content)
  }
  return (
  <div>
    {
      countries.map((country) => ( 
      <button onClick = {() =>handleClick(country.id)}> {`show content, id : ${country.id}`}</button>
      ))}
     <div> {content} </div>
    </div>
  )
}

function App() {
  return ( 
    <div className = "App">
      <Button/>
    </div>
  );
}

ReactDOM.render( <App/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如何根据按钮的 ID 呈现数组的特定元素 onClick

How to render array's specific, based on ID, element onClick of a button

html

javascript

reactjs